redux系列之react thunk原始碼解讀

不過，redux只是乙個和其他庫無關的狀態管理庫，為了能夠方便的在react中使用，我們必須結合react-redux來使用。react-redux通過provider使用給react專案的所有子元件注入store，通過connect給元件注入state和dispatch。

但是，有了react-redux還不夠！我們還需要react-thunk!

ajax請求發出去的時候，經常涉及到這3個狀態：loading，success，error3個狀態，而且這3個狀態是在同乙個地方產生的，那麼，如果僅有react-thunk，那麼，我們需要在元件內部這樣寫**：

this.props.dispatch(loadingaction);

ajax('/getdata').then(res => ).catch(err => )

export function getdata(dispatch) ).catch(err => );
}業務元件**
import  from './api.js';
class mycomponent extends component 
}

export function getdata(dispatch, getstate) ).catch(err => );
}業務元件**
import  from './api.js';
class mycomponent extends component 
}

所以呢，通過以上分析，我們react-thunk就閃亮登場了！

import thunk from 'redux-thunk';
const initialstate = {};
const reducer = function(state={}, action);
export function getdata(dispatch, getstate) ).catch(err => );
}業務元件**
import  from './actions.js';
class mycomponent extends component 
}

看原始碼：

//乙個建立thunk的中介軟體工廠函式

function createthunkmiddleware(extraargument) ) => next => action => 
return next(action);
};}//建立出thunk中介軟體
const thunk = createthunkmiddleware();
thunk.withextraargument = createthunkmiddleware;
export default thunk;

全文完

redux之入門學習

總結 1 頁面上view通過store.dispatch 發出 action，action統一在actioncreators.js檔案中，2 store 收到 action 以後，執行reducer.js中對應的方法，reducer是乙個函式，它接受 action 和當前 state 作為引數，返回...

React 狀態管理之Redux

flux vuex vue react redux react state 狀態收集 更新內部state狀態，更新component 1.建立預設狀態 一般const or let乙個物件 const defaultstate 2.建立 reducer 純函式 函式必須有返回值 let reduce...

redux之createStore方法底層封裝模擬

首先在看 之前讓我們一起回顧下redux的思想吧 首先redux就是乙個mvc思想的框架，他總體是遵循資料的單向流動自頂向下流動 在我們倉庫中有乙個initstate用來儲存著我們的初始資料 另外還有個actions這個用來進行一些變數的改變和傳遞 也就是mvc結構中的c 控制層 另外裡面的redu...