React學習筆記 Redux基礎篇

redux，狀態管理器，將state進行統一的管理，適用於複雜的使用者操作、需要協同的使用者操作、涉及到許可權的網頁、多資料來源等場景。

action：顧名思義，動作。需要執行怎樣的操作，action是乙個物件，內部包含了此action的型別和相關資訊，規範的action如下：

每次都寫一遍action非常的蛋疼，所以可以自己設定乙個function去生成固定的規範的action，這樣一定程度上避免了拼寫錯誤等操作

function
createaction
(text)
}

store，儲存資料（state）的地方，全域性只能有乙個store可以通過redux提供的createstore來建立

import  from
'redux';
const store = createstore(reducer);

state，真正持有資料的物件，可以通過store.getstate()來得到

reducer應是乙個純函式，接收當前state和action，根據不同的action來返回乙個新的state。

const chatreducer = (state = {}, action = {}) =>  = action;
switch (type) , state, );
case change_status:
return
object.assign({}, state, );
case change_username:
return
object.assign({}, state, );
default: return state;
}};

當存在非常多的action，如果無法對這些action進行區分，reducer將會變得非常的龐大複雜難以閱讀，因此redux官方提供了乙個方法combinereducers讓我們可以分開寫不同的function來處理相似型別的action（action具體怎麼分看，視情況而定），應用如下：

//state結構如下
,    
]}

//拆分後的reducer
import  from 'redux'
function
todos
(state = , action) 
]case toggle_todo:
return state.map((todo, index) => , todo, )
}return todo
})default:
return state
}}function
visibilityfilter
(state = show_all, action) 
}function
(state = {}, action) 
}//通過combinereducers重新組合
visibilityfilter,
todos
})

這種寫法有乙個前提，就是 state 的屬性名必須與子 reducer 同名。如果不同名，就要採用下面的寫法。

const reducer = combinereducers()//與上面的寫法等價
function
reducer(state = {}, action) 
}

總的來說，即將原本單個總的reducer拆分成了：單個主reducer、若干個子reducer。主reducer負責選擇子reducer並分發相應部分的state資料。子reducer專注於處理state當中的一部分內容

store.getstate:獲取最新的state，此函式將返回乙個state；

store.dispatch:分發action，在const store＝creatstore(reducer)的情況下會在執行dispatch後自動觸reducer；

store.subscribe：註冊乙個***，在stroe.dispatch()後將以此執行***，此函式返回乙個函式，呼叫返回的函式即可解除***

let unsubscribe = store.subscribe(() =>
console.log(store.getstate())
);unsubscribe
();

使用者觸發操作啟用store.dispatch()；

store函式呼叫reducer，並傳入兩個引數當前state與action；

state發生變化觸發listener；

如果listener內獲取了最新的state並setstate，將會進入react的更新流程；

/*
* action 型別
*/export
const add_todo = 'add_todo';
export
const toggle_todo = 'toggle_todo'
export
const set_visibility_filter = 'set_visibility_filter'

參考：

1. 阮一峰redux入門教程

2. redux中文文件

3. action規範

React學習筆記 Redux基礎篇

React學習記錄 Redux

React學習筆記（五） Redux應用架構

學習筆記 react中實現倉庫redux

React學習筆記 Redux基礎篇

React學習記錄 Redux

React學習筆記（五） Redux應用架構

學習筆記 react中實現倉庫redux

相關推薦