reatc學習筆記(二) redux

2022-07-13 08:51:13 字數 1079 閱讀 4789

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...