本篇主要將react全家桶的產品非常精煉的提取了核心內容，精華程度堪比精油。各位大人，既然來了，客官您坐，來人，給客官看茶~~
前言
首先，本篇文章要求您對js,react等知識有一定的了解，如果不曾了解，建議您先看一下：React精髓！一篇全概括(急速)
React有props和state:
這就意味著如果是一個數據狀態非常復雜的應用，更多的時候發現React根本無法讓兩個組件互相交流，使用對方的數據，react的通過層級傳遞數據的這種方法是非常難受的，這個時候，迫切需要一個機制，把所有的state集中到組件頂部，能夠靈活的將所有state各取所需的分發給所有的組件，是的，這就是redux
簡介
使用步驟
創建reducer
創建action
創建的store，使用createStore方法
按步驟手把手實戰。
上述步驟，對應的序號，我會在相關代碼標出
npm install redux -S // 安裝import { createStore } from 'redux' // 引入const reducer = (state = {count: 0}, action) => {----------> ⑴ switch (action.type){ case 'INCREASE': return {count: state.count + 1}; case 'DECREASE': return {count: state.count - 1}; default: return state; }}const actions = {---------->⑵ increase: () => ({type: 'INCREASE'}), decrease: () => ({type: 'DECREASE'})}const store = createStore(reducer);---------->⑶store.subscribe(() => console.log(store.getState()));store.dispatch(actions.increase()) // {count: 1}store.dispatch(actions.increase()) // {count: 2}store.dispatch(actions.increase()) // {count: 3}自己畫了一張非常簡陋的流程圖，方便理解redux的工作流程
剛開始就說了，如果把store直接集成到React應用的頂層props里面，只要各個子組件能訪問到頂層props就行了，比如這樣：
<頂層組件 store={store}> <App /></頂層組件>不就ok了嗎？這就是 react-redux。Redux 官方提供的 React 綁定庫。 具有高效且靈活的特性。
React Redux 將組件區分為 容器組件 和 UI 組件
兩個核心
Provider
看我上邊那個代碼的頂層組件4個字。對，你沒有猜錯。這個頂級組件就是Provider,一般我們都將頂層組件包裹在Provider組件之中，這樣的話，所有組件就都可以在react-redux的控制之下了,但是store必須作為參數放到Provider組件中去
<Provider store = {store}> <App /><Provider>這個組件的目的是讓所有組件都能夠訪問到Redux中的數據。
connect
這個才是react-redux中比較難的部分，我們詳細解釋一下
首先，先記住下邊的這行代碼：
connect(mapStateToProps, mapDispatchToProps)(MyComponent)
mapStateToProps
這個單詞翻譯過來就是把state映射到props中去 ,其實也就是把Redux中的數據映射到React中的props中去。
舉個栗子：
const mapStateToProps = (state) => { return { // prop : state.xxx | 意思是將state中的某個數據映射到props中 foo: state.bar } }然后渲染的時候就可以使用this.props.foo
class Foo extends Component { constructor(props){ super(props); } render(){ return( // 這樣子渲染的其實就是state.bar的數據了 <div>this.props.foo</div> ) }}Foo = connect()(Foo);export default Foo;然后這樣就可以完成渲染了
mapDispatchToProps
這個單詞翻譯過來就是就是把各種dispatch也變成了props讓你可以直接使用
const mapDispatchToProps = (dispatch) => { // 默認傳遞參數就是dispatch return { onClick: () => { dispatch({ type: 'increatment' }); } };}class Foo extends Component { constructor(props){ super(props); } render(){ return( <button onClick = {this.props.onClick}>點擊increase</button> ) }}Foo = connect()(Foo);export default Foo;組件也就改成了上邊這樣，可以直接通過this.props.onClick，來調用dispatch,這樣子就不需要在代碼中來進行store.dispatch了
react-redux的基本介紹就到這里了
如果按照原始的redux工作流程，當組件中產生一個action后會直接觸發reducer修改state，reducer又是一個純函數，也就是不能再reducer中進行異步操作；
而往往實際中，組件中發生的action后，在進入reducer之前需要完成一個異步任務,比如發送ajax請求后拿到數據后，再進入reducer,顯然原生的redux是不支持這種操作的
這個時候急需一個中間件來處理這種業務場景，目前最優雅的處理方式自然就是redux-saga
核心講解
1、Saga 輔助函數
redux-saga提供了一些輔助函數，用來在一些特定的action 被發起到Store時派生任務，下面我先來講解兩個輔助函數：takeEvery 和 takeLatest
takeEvery
takeEvery就像一個流水線的洗碗工，過來一個臟盤子就直接執行后面的洗碗函數，一旦你請了這個洗碗工他會一直執行這個工作，絕對不會停止接盤子的監聽過程和觸發洗盤子函數
例如：每次點擊 按鈕去Fetch獲取數據時時，我們發起一個 FETCH_REQUESTED 的 action。 我們想通過啟動一個任務從服務器獲取一些數據，來處理這個action，類似于
window.addEventLister('xxx',fn)當dispatch xxx的時候，就會執行fn方法，
首先我們創建一個將執行異步 action 的任務(也就是上邊的fn)：
// put：你就認為put就等于 dispatch就可以了；// call：可以理解為實行一個異步函數,是阻塞型的，只有運行完后面的函數，才會繼續往下；// 在這里可以片面的理解為async中的await！但寫法直觀多了！import { call, put } from 'redux-saga/effects'export function* fetchData(action) { try { const apiAjax = (params) => fetch(url, params); const data = yield call(apiAjax); yield put({type: "FETCH_SUCCEEDED", data}); } catch (error) { yield put({type: "FETCH_FAILED", error}); }}然后在每次 FETCH_REQUESTED action 被發起時啟動上面的任務,也就相當于每次觸發一個名字為 FETCH_REQUESTED 的action就會執行上邊的任務,代碼如下
import { takeEvery } from 'redux-saga'function* watchFetchData() { yield* takeEvery("FETCH_REQUESTED", fetchData)}注意：上面的 takeEvery 函數可以使用下面的寫法替換
function* watchFetchData() { while(true){ yield take('FETCH_REQUESTED'); yield fork(fetchData); }}takeLatest
在上面的例子中，takeEvery 允許多個 fetchData 實例同時啟動，在某個特定時刻，我們可以啟動一個新的 fetchData 任務， 盡管之前還有一個或多個 fetchData 尚未結束
如果我們只想得到最新那個請求的響應（例如，始終顯示最新版本的數據），我們可以使用 takeLatest 輔助函數
import { takeLatest } from 'redux-saga'function* watchFetchData() { yield* takeLatest('FETCH_REQUESTED', fetchData)}和takeEvery不同，在任何時刻 takeLatest 只允許執行一個 fetchData 任務，并且這個任務是最后被啟動的那個，如果之前已經有一個任務在執行，那之前的這個任務會自動被取消
2、Effect Creators
redux-saga框架提供了很多創建effect的函數，下面我們就來簡單的介紹下開發中最常用的幾種
take(pattern)
take函數可以理解為監聽未來的action，它創建了一個命令對象，告訴middleware等待一個特定的action， Generator會暫停，直到一個與pattern匹配的action被發起，才會繼續執行下面的語句，也就是說，take是一個阻塞的 effect
用法：
function* watchFetchData() { while(true) { // 監聽一個type為 'FETCH_REQUESTED' 的action的執行，直到等到這個Action被觸發，才會接著執行下面的 yield fork(fetchData) 語句 yield take('FETCH_REQUESTED'); yield fork(fetchData); }}put(action)
put函數是用來發送action的 effect，你可以簡單的把它理解成為redux框架中的dispatch函數，當put一個action后，reducer中就會計算新的state并返回，注意： put 也是阻塞 effect
用法：
export function* toggleItemFlow() { let list = [] // 發送一個type為 'UPDATE_DATA' 的Action，用來更新數據，參數為 `data：list` yield put({ type: actionTypes.UPDATE_DATA, data: list })}call(fn, ...args)
call函數你可以把它簡單的理解為就是可以調用其他函數的函數，它命令 middleware 來調用fn 函數， args為函數的參數，注意： fn 函數可以是一個 Generator 函數，也可以是一個返回 Promise 的普通函數，call 函數也是阻塞 effect
用法：
export const delay = ms => new Promise(resolve => setTimeout(resolve, ms))export function* removeItem() { try { // 這里call 函數就調用了 delay 函數，delay 函數為一個返回promise 的函數 return yield call(delay, 500) } catch (err) { yield put({type: actionTypes.ERROR}) }}fork(fn, ...args)
fork 函數和 call 函數很像，都是用來調用其他函數的，但是fork函數是非阻塞函數，也就是說，程序執行完 yield fork(fn， args) 這一行代碼后，會立即接著執行下一行代碼語句，而不會等待fn函數返回結果后，在執行下面的語句
用法：
import { fork } from 'redux-saga/effects'export default function* rootSaga() { // 下面的四個 Generator 函數會一次執行，不會阻塞執行 yield fork(addItemFlow) yield fork(removeItemFlow) yield fork(toggleItemFlow) yield fork(modifyItem)}select(selector, ...args)
select 函數是用來指示 middleware調用提供的選擇器獲取Store上的state數據，你也可以簡單的把它理解為redux框架中獲取store上的 state數據一樣的功能 ：store.getState()
用法：
export function* toggleItemFlow() { // 通過 select effect 來獲取 全局 state上的 `getTodoList` 中的 list let tempList = yield select(state => state.getTodoList.list)}一個具體的實例
**index.js **
import React from 'react';import ReactDOM from 'react-dom';import {createStore, applyMiddleware} from 'redux'import createSagaMiddleware from 'redux-saga'import rootSaga from './sagas'import Counter from './Counter'import rootReducer from './reducers'const sagaMiddleware = createSagaMiddleware() // 創建了一個saga中間件實例// 下邊這句話和下邊的兩行代碼創建store的方式是一樣的// const store = createStore(reducers,applyMiddlecare(middlewares))const createStoreWithMiddleware = applyMiddleware(middlewares)(createStore)const store = createStoreWithMiddleware(rootReducer)sagaMiddleware.run(rootSaga)const action = type => store.dispatch({ type })function render() { ReactDOM.render( <Counter value={store.getState()} onIncrement={() => action('INCREMENT')} onDecrement={() => action('DECREMENT')} onIncrementAsync={() => action('INCREMENT_ASYNC')} />, document.getElementById('root') )}render()store.subscribe(render)sagas.js
import { put, call, take,fork } from 'redux-saga/effects';import { takeEvery, takeLatest } from 'redux-saga'export const delay = ms => new Promise(resolve => setTimeout(resolve, ms));function* incrementAsync() { // 延遲 1s 在執行 + 1操作 yield call(delay, 1000); yield put({ type: 'INCREMENT' });}export default function* rootSaga() { // while(true){ // yield take('INCREMENT_ASYNC'); // yield fork(incrementAsync); // } // 下面的寫法與上面的寫法上等效 yield* takeEvery("INCREMENT_ASYNC", incrementAsync)}reducer.js
export default function counter(state = 0, action) { switch (action.type) { case 'INCREMENT': return state + 1 case 'DECREMENT': return state - 1 case 'INCREMENT_ASYNC': return state default: return state }}從上面的代碼結構可以看出，redux-saga的使用方式還是比較簡單的，相比較之前的redux框架的CounterApp，多了一個sagas的文件，reducers文件還是之前的使用方式
redux-saga基本用法總結：
ok,故事到這里就接近尾聲了，以上主要介紹了redux,react-redux和redux-saga目前redux全家桶主流的一些產品,接下來,主要會產出一下根據源碼,手寫一下redux和react-redux的輪子
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
