react和redux中的幾種常用的方法

2021-07-31 10:09:05 字數 2487 閱讀 4165

1. createstore(reducer, [initstate, enhancer])------redux中的方法

'redux'

import thunk from

'redux-thunk'

import createlogger from

'redux-logger'

import api from

'../middleware/api'

import rootreducer from

'../reducers'

import devtools from

'../containers/devtools'

export

default

function

configurestore(preloadedstate)

2. store

store是用來維持應用所有state樹的乙個物件。改變state的唯一方法是store dispatch乙個action。

store不是類,而只是乙個有幾個方法的物件,可以採用createstore進行建立。

3. combinereducers(reducers)

combinereducers輔助函式的作用是,把乙個由多個不同 reducer 函式作為 value 的 object,合併成乙個最終的 reducer 函式,然後就可以對這個 reducer 呼叫 createstore。

多個子reducer函式合併後,相當於整體函式會為state特定字段進行對映產生特定的reducer函式。 如頁面中的例子;todos和counter只會處理對應字段過來的action。

輸入乙個middlewares陣列,返回乙個函式,函式以createstore為引數:

export default

function

(...middlewares)

chain = middlewares.map(middleware => middleware(middlewareapi))

dispatch = compose(...chain)(store.dispatch)

return

}}

使用示例:

'redux'

import todos from

'./reducers'

function

logger()

}let store = createstorewithmiddleware(todos, [ 'use redux' ])

每個 middleware 接受 store 的 dispatch 和 getstate 函式作為命名引數,並返回乙個函式。該函式會被傳入 被稱為 next 的下乙個 middleware 的 dispatch 方法,並返回乙個接收 action 的新函式,這個函式可以直接呼叫next(action),或者在其他需要的時刻呼叫,甚至根本不去呼叫它。呼叫鏈中最後乙個 middleware 會接受真實的 store 的 dispatch 方法作為 next 引數,並藉此結束呼叫鏈。所以,middleware 的函式簽名是 () => next => action。

5. bindactioncreators(actioncreators,dispatch)

經過bindactioncreators處理的actions,直接呼叫函式而不需呼叫dispatch即可觸發state的改變。

可以參考文章。

6. compose(...functions)

從右到左來組合多個函式。

這是函式式程式設計中的方法,為了方便,被放到了 redux 裡。 當需要把多個 store 增強器 依次執行的時候,需要用到它。

參考文章:文章

7. 和connect([mapstatetoprops], [mapdispatchtoprops],[mergeprops], [options])

使元件層級中的 connect()方法都能夠獲得 redux store。正常情況下,你的根元件應該巢狀在 中才能使用 connect()方法。

reactdom.render(

store=>

provider>

, rootel

);

connect: 連線 react 元件與 redux store。

// mapstatetoprops: 哪些 redux 全域性的 state 是我們元件想要通過 props 獲取的?

function mapstatetoprops(state)

}

// mapdispatchtoprops: 哪些 action 建立函式是我們想要通過 props 獲取的?

function

mapdispatchtoprops

(dispatch)

}

mergeprops和options: 再議

react中redux的使用

1.安裝redux npm install redux 2.store的建立 src store index.js import from redux import reducer from reducer const store createstore reducer src store redu...

react 中的redux的使用

在專案中安裝redux yarn add redux yarn add react redux 首先建立乙個store資料夾 在store資料夾中建立乙個index.js檔案 在index.js中建立乙個例項 import from redux const state createstore exp...

關於react中redux的理解

redux是react的狀態管理工具,在redux中,將所有的狀態統一集中到唯一的stoer中管理,在store中只能通過自己定義的方法來修改狀態,優點是可以 到狀態的變化,執行相應的修改方法,提高可維護性和可讀性,易於狀態監聽。redux的使用方法 redux用來建立reducer store a...