react-redux之中間件(react-actions,saga)

redux-actions

親愛的朋友們，上一章講到了redux基礎篇，以便大家更好的去理解redux工作模式，單向數據流的思維方式，此篇將爲大家介紹一個redux中的一個集成插件redux-actions,它的出現以便我們更好的運用redux這個工具，在項目運用更加便潔。

redux-actions之createActions

在未用此插件的時候，一般在actions中，寫一個匹配放在方法函數裏，導出；應該都知道，action是對象，表示要做什麼，把需要的匹配的條件寫在action裏。

1. createActions方法 ，進行匹配條件，對應的函數功能，它能觸發redecuer方法的；

import { createActions } from 'redux-actions';
import {REQUSET_SHARE_START,REQUSET_SHARE_SUCCESS,REQUEST_SHARE_FAILED} from 'Component/store/type/login-management/login-share.js';
const {requsetShareStart,requsetShareSuccess,requestShareFiled} = createActions({
	[REQUSET_SHARE_START]:payload => ({payload}),
	[REQUSET_SHARE_SUCCESS]:payload => {return ({payload})},
	[REQUEST_SHARE_FAILED]:payload => ({payload})

});
export {requsetShareStart,requsetShareSuccess,requestShareFiled};

2.handleActions方法,這是reducer方法集成，在這可以匹配action的條件，在這個函數方法裏，對你的業務邏輯進一步優選，他也是對reducer方法的進一步封裝；

• ps:1,2中的方法均可單獨使用，並非存在衝突。不一定非你不可而已。

const loginShareReducer = handleActions({
  [REQUSET_SHARE_START]:(state,action) =>{return({
  	...state,
  	loginShare:action.payload.payload
  })},
  [REQUSET_SHARE_SUCCESS]:(state,action) =>{return({
  	...state,
  	loginShare:action.payload.payload
  })},
  [REQUEST_SHARE_FAILED]:(state,action) => ({
  	...state,
  	loginShare:action.payload.payload
  })
},defaultState);

而後面的redux-logger/combineReducers這些中間件，基本都是一樣的，也一樣可以採用多層嵌套而已，也只是應對複雜的業務邏輯，達到更好處理方式。

redux-saga

• 待續。。。