不吹不黑，redux蠻好用。只是有時略顯繁瑣，叫我定義每一個action、action type、使用時還要在組件上綁定一遍，臣妾做不到呀！下面分享一種個人比較傾向的極簡寫法，仍有待完善，望討論。
github: github.com/liumin1128/…
基于redux、async/await、無侵入、兼容性良好的異步狀態管理器。
install
npm i -S redux-effect// or
yarn add redux-effect
復制代碼use
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { reduxReduers, reduxEffects } from 'redux-effect';const models = [ test1, test2, ...];const reducers = combineReducers(reduxReduers(models));
const middlewares = [ reduxEffects(models) ];const store = createStore(reducers,initialState,middlewares);
復制代碼從代碼可以看出，從reduxReduers, reduxEffects中得到的就是標準的reducer和middleware，完美兼容其他redux插件，也可以輕松整合進老項目中。
完整例子：example
model
在redux-effect中，沒有action的概念，也不需要定義action type。
所有關于某個state的一切聲明在一個model中，本質就是一個對象。
export default {namespace: 'test',state: { text: 'hi!' },reducers: {save: (state, { payload }) => ({ ...state, ...payload }),clear: () => ({})},effects: {fetch: async ({ getState,dispatch }, { payload }) => {await sleep(3000);await dispatch({ type: 'test/clear' });await sleep(3000);await dispatch({ type: 'test/save', payload: { text: 'hello world' } });}}
};復制代碼namespace：
model的命名空間，對應state的名字，必填，只接受一個字符串。
state：
state的初始值，非必填，默認為空對象
reducers：
必填，相當于同步執行的action方法，接受兩個參數state和action，合并后返回新的state狀態值。
effects：
非必填，相當于異步執行的action方法，接受兩個參數store和action，store里包括redux自帶的getState和dispatch方法，action為用戶dispatch時帶的參數。
dispatch
這里的dispatch就是redux中的dispatch，但有幾個約定。
- 不傳定義好的action，而是直接傳一個普通對象。
- type的組織形式：namespace + '/' + reducer或effect方法名
- 參數的傳遞：需要合并的參數用payload包裹
定義每一個action，并將其綁定到視圖層過于繁瑣，去action化則讓事件的觸發變的靈活。
普通事件
發送事件時，不區分同步還是異步，只管dispatch，一切都已在model中定義好。
// 同步
dispatch({ type: 'test/save', payload: { text: "hello world" } })
// 異步
dispatch({ type: 'test/fetch' })
復制代碼等待
等待一個事件完成再執行邏輯，dispatch方法是可以被await的，十分輕松。
async function test() {await dispatch({ type: 'test/fetch' })await console.log('hello world')
}
復制代碼回調
等待某個事件，再執行外部定義的某個回調函數，只需要在action字段里加上callback方法，在effect中調用即可。
相比較await，回調可以拿到某些返回值，也可以在effect流程的中間部分執行。
dispatch({ type: 'test/fetch', callback1, callback2 }){effects: {fetch: async ({ getState,dispatch }, { payload, callback, callback2 }) => {const state = await getState()await sleep(3000);await callback1(state)await sleep(3000);await callback2(state)}}
}
復制代碼自定義reducer
reducer其實就是redux中的reducer，用法完全一樣。比如定義一個push方法，將后續數據，壓入到原有數據后面，可以這樣寫。
export default {namespace: 'test',state: { data: [] },reducers: {save: (state, { payload }) => ({ ...state, ...payload }),clear: () => ({}),push: (state, { payload = {} }) => {const { key = 'data', data } = payload;return { ...state, [key]: state[key].concat(data) };}},
};
復制代碼自定義effect
effect其實就是一個普通async函數，接受store和action兩個參數，可以使用async/await，可以執行任意異步方法，可以隨時拿到state的值，可以dispatch觸發另一個effect或者reducer。
loading
也許你會想監聽某個effect，拿到loading狀態，以便在ui給用戶一個反饋。一般情況下監聽一個異步方法，只需要在effect的開頭和結束，各自設定狀態即可，與常規寫法無異。
但這里也提供一種model級別的loading狀態，新增一個名為loading的model，再使用reduxEffectsWithLoading包裹需要監聽的model即可。
關于model-creator
以上所做的事情，是將redux核心規范為model，得到了統一且可以復用的數據模型，這為自動生成model創造了可能性，如果能通過工廠模式，自動化創建具有類似功能，且可以隨意裝配的model，一切將變得更加美好。
Coming Soon
