react的狀態管理,類似於vue的vuex;
不同點是:redux可以不依賴react使用,react沒有redux也可以使用,vuex必須依賴vue使用
公共的共享資料
redux渲染流程
reducer為更改store裡資料的東西,通過reducer去和state互動
流程為:
store.getstate();//獲取store中的共享資料
store.subscribe(函式)//redux的發布訂閱功能,store改變觸發某個函式(利用這個修改元件內state的值)
store.dispatch(action)//action應該是個物件,用來派發修改store中的值
想使用redux狀態管理的話,要先建立store
import from "redux"
import 自己寫的reducer from 路徑
const store=createstore(reducer,增強器,中介軟體)
//如果只有兩個引數const store=createstore(reducer,中介軟體||中介軟體)
//如果想使用中介軟體的話,要匯入middleware從redux中
export default store
reducer的思路:
reducer是會拷貝乙份原有的資料,然後去匹配傳過來的action的型別;
判斷這個型別action,然後將複製的新的state修改成需要的state;
將這個state返回去替換原本的state;
用乙個變數接收返回之後的action(即新的state);
用store.dispatch(action值)來對store值進行修改
寫法例:
import * as types from "../actiontype"
const initstate =
export default (state = initstate, action) =>
return state
}
Redux 學習筆記(二)
要將 redux 和 react 結合起來使用,就還需要一些額外的工具,其中最重要的是 react redux react redux 提供了兩個重要的物件,provider 和 connect,前者使 react 元件可被連線 connectable 後者把 react 元件和 redux 的 s...
Redux 學習筆記(二)
高階元件 簡單的說,高階元件就是乙個函式,這個函式接收乙個元件作為輸入,返回乙個元件作為結果,因此,新返回的元件擁有了輸入元件所不具備的功能。import react from react render this.props export default removeuserprop const n...
redux學習筆記
流程如下 在redux中使用者的操作並不會直接導致view層的更新,而是view層發出actions通知出發store裡的reducer從而來更新state state的改變會將更新反饋給我們的view層,從而讓我們的view層發生相應的反應給使用者。redux中有三個基本概念,action,red...