Redux 的工作流程和常用 API

2021-10-01 02:12:11 字數 2731 閱讀 6564

redux 把所有資料放在 store 裡面管理，只需更改 store 裡的資料，元件感知到 store 裡面的資料變化，再來取資料，從而間接地實現元件之間資料傳遞的功能。

1.redux 的工作流程

2.如何使用 redux

（1）首先安裝依賴包

yarn add redux
（2）建立 redux 中的 store

// 在 store/index.js 檔案下， 


import from 'redux'


import reducer from './reducer'; 


const store = createstore(reducer); 


export default store
通過 createstore 建立 store ，將 reducer 的資料儲存情況傳遞給 store.

（3）如何構建 reducer

// 在 store/reducer.js下，只需返回乙個函式


const defaultstate = //相當於建立乙個空筆記本


// state 表示上一次儲存的所有 store 裡面的所有資料，action 表示 這一次提交過來的資料


export default (state, action) =>
（4）元件如何連線 store 來獲取資料呢

使用 store.getstate() 獲取store 中的資料，同時複製到 元件的 state 中去

import store from './store';


constructor(props) 


// 元件如何使用呢
（5）actiontypes 的拆分

// actiontypes.js 檔案下


export const change_input_value = 'change_input_value';
（6）使用 actioncreator 統一建立 action

// 在 actioncreators.js 檔案下


import from './actiontypes' 


export const getinputchangevalue = (value) => ()
（7）通過 action 改變 store 裡面的資料

import  from './store/actioncreators'  


constructor(props) 


handleinputchange(e) 


const action = getinputchangevalue(e.target.value)


store.dispatch(action) 


} // 將 e.target.value 的值通過 action 改變 store 裡面的資料，那麼我們怎麼建立 action 呢？


// 呼叫 dispatch 將action 傳遞給 store
（8）store 獲取到action 傳遞過來的資訊，**給 reducer 進行處理，處理完成後將結果返回 store 中。

import  from './actiontypes' 


const defaultstate = 


// state 表示上一次儲存的資料，action 表示 這一次提交過來的資料


export default (state = defaultstate, action) => 


return state; 


}
注意：reducer 可以接收 state, 但絕不能修改 state,reducer 返回 newstate 資料給store，store把新資料替換掉原來的舊資料

（9）store 裡面的資料更新了，頁面上元件資料並未更新 

在元件的constructor 中，新增 store.subscribe 方法。只有store裡面資料改變，subscribe 裡面的函式自動執行

constructor(props)  


handlestorechange()
store 資料發生改變，元件使用 setstate 來更新資料，通過 store.getstate 重新獲取資料，這樣頁面上的資料就和 store 中的資料同步啦。

1.store 是唯一的 【createstore】

2.只有 store 改變自己的內容【reducer 拿到之前的 store 資料，然後一系列處理後將資料返回給了 store，store 拿到新的資料後，把自己的資料更新 】

3.reducer 必須是純函式【純函式是給定固定的輸入，就一定有固定的輸出，而且不會有任何***，不能修改 state 中的資料】

1.createstore【建立 store 】

2.store.dispatch【派發action傳遞給 store】

3.store.getstate【可以獲取到 store 裡面所有的資料】

4.store.subscribe【訂閱store的改變，只有store進行改變，這個方法就執行】

redux工作流程

首先，使用者發出 action。store.dispatch action 然後，store 自動呼叫 reducer，並且傳入兩個引數 當前 state 和收到的 action。reducer 會返回新的 state state 一旦有變化，store 就會呼叫監聽函式。設定監聽函式 store....

輕鬆理解Redux原理及工作流程

redux由dan abramov在2015年建立的科技術語。是受2014年facebook的flux架構以及函式式程式語言elm啟發。很快，redux因其簡單易學體積小在短時間內成為最熱門的前端架構。本文中我將用通俗易懂的方式講述redux的原理和工作流程 react元件 或其他使用redux的元...

常用GIT工作流程

git clone url 建立本地倉庫 git checkout origin dev b dev 拉取遠端dev分支到本地dev分支 git checkout b ningliu 新建自己的本地分支ningliu ningliu是我的名字 git push set upstream origin...