redux 中介軟體 redux thunk

什麼是中介軟體？ 中介軟體指的是redux的，不是react的。中間指的是action跟store之間，也就是對dispacth方的封裝，最原始的是直接將接受過來的物件直接傳遞給store，但是如果傳遞的是乙個函式的話，就不會將這直接傳遞給store，而是先執行這個函式。

常見的中間有

redux-devtools-extension，`redux-thunk,redux-saga,redux-log等

一 、redux-thunk

redux-thunk的引出:元件中引入過多的非同步請求，會使得元件變得異常的臃腫，為了解決這個我問題，redux-thunk中介軟體 將非同步請求放在action裡面進行實現。

非同步函式放在元件的生命週期裡面，會使得非同步元件更加的難易維護，也很方便自動化測試

1： 安裝：yarn add redux-thunkredux-thunk是作用於建立store的時候

// store/index.js

import thunk from 'redux-thunk';
import reducer from './reducer'
//typeof
window === 'object' 判斷是不是瀏覽器環境 
const composeenhancers = window.__redux_devtools_extension_compose__ ? window.__redux_devtools_extension_compose__() : compose
const enhancer = composeenhancers(
);const store = createstore( reducer, enhancer )
export
default store

3：使用：普通的actioncreater返回的是乙個函式，return的是乙個物件

export

const
gethandleinput_action = (value) =>()

但是使用redux-thunk的時候return出去的可以是乙個函式，函式可以直接接受乙個引數dispatch .

./store/actioncreator.js

export
const
getinitdata = () =>
dispatch(actions)})}
}

使用redux-thunk的時候store的dispatch就也可以傳送乙個函式給store了，並且會自動執行以下這個函式

import  from './store/actioncreator'

componentdidmount()

redux中介軟體原理

應用了如下的中介軟體 a,b,c 整個執行 action 的過程為 a b c dispatch c b a action 最右側的next action 返回的是應用傳入的action 該行為是由redux createstore原始碼中dispatch方法返回值決定的，不過一般都會return ...

redux中介軟體剖析

首先我們來了解一下redux的幾個基本概念 redux的乙個粗略的是處理過程就是 redux中介軟體其實是提供了位於action被發起之後，到達reducer之前的擴充套件點，暫時簡單理解為這樣 其實不然，實際詳細結構往後看ovo 箭頭函式風格 next action 相當於 至於為什麼要這種格式，...

redux中介軟體 redux thunk

redux中介軟體 redux thunk 通常情況下，action只是乙個物件，不能包含非同步操作，這導致了很多建立action的邏輯只能寫在元件中，量較多也不便於復用，同時對該部分 測試的時候也比較困難，元件的業務邏輯也不清晰，使用中介軟體了之後，可以通過actioncreator非同步編寫ac...