react redux的原理以及基礎使用講解

2022-08-04 18:02:06

介紹

vue 是一個 MVVM層，可以實現雙向資料繫結，而 react 只能算一個 view 層，狀態改變了只有去呼叫setState({xxx}) 才能去修改檢視，當我們資料很複雜的時候可能需要用到 redux

如果你不知道是否需要 Redux，那就是不需要它

只有遇到 React 實在解決不了的問題，你才需要 Redux

使用者的使用方式複雜不同身份的使用者有不同的使用方式（比如普通使用者和管理員）多個使用者之間可以共同作業與伺服器大量互動，或者使用了WebSocketView要從多個來源獲取資料

Web 應用是一個狀態機，檢視與狀態是一一對應的（有一方改變另一方也會改變）。

所有的狀態，儲存在一個物件裡面

yarn add redux

按圖示建立即可

import { createStore } from 'redux';
const store = createStore(fn);

通過 creatStore 方法接收一個函數作為引數，最終返回一個倉庫

可以接收之前的狀態和 action ，最終返回一個新狀態

需要定義一個純函數

const reducer = (prevState,action)=>{
    let newState = prevState.todos.slice()
    return newState
}
export default  reducer

const store = createStore(reducer);

完整程式碼展示

//  store/index.js
import { createStore } from 'redux';
import reducer from "./reducer"
const store = createStore(reducer);
export default store

// store/reducer.js
const reducer = (prevState,action)=>{
    let newState = prevState.todos.slice()
    return newState
}
export default  reducer

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。