Ducks: 一種redux的模塊組織方式
先前用redux寫(xiě)的項(xiàng)目中每次新增加一個(gè)功能都要從actionTypes讶坯，actions宣鄙，reducer一個(gè)個(gè)文件開(kāi)始添加袍镀，一不小心還會(huì)出錯(cuò)，因此在github找了找發(fā)現(xiàn)一種名叫ducks的redux代碼組織方式冻晤。下面就簡(jiǎn)單介紹下它的思想苇羡。
作者遇到的問(wèn)題跟我的困擾是一樣的，每次新增加一個(gè)功能就需要在單獨(dú)的文件中分別添加{actionTypes, actions, reducer}對(duì)鼻弧，因此把不如將他們都組合放在一個(gè)單獨(dú)的模塊中设江。
方案
例子
下面就是一個(gè)組織到一起的名為widgets的module：
// widgets.js
// Actions
const LOAD = 'my-app/widgets/LOAD';
const CREATE = 'my-app/widgets/CREATE';
const UPDATE = 'my-app/widgets/UPDATE';
const REMOVE = 'my-app/widgets/REMOVE';
// Reducer
export default function reducer(state = {}, action = {}) {
switch (action.type) {
// do reducer stuff
default: return state;
}
}
// Action Creators
export function loadWidgets() {
return { type: LOAD };
}
export function createWidget(widget) {
return { type: CREATE, widget };
}
export function updateWidget(widget) {
return { type: UPDATE, widget };
}
export function removeWidget(widget) {
return { type: REMOVE, widget };
}
規(guī)則
在module中我們需要遵循下面的代碼風(fēng)格和命名方式：
- 須用
export default輸出名為reducer()的函數(shù) - 須用
export輸出 函數(shù)形式的action creators - 須用
npm-module-or-app/reducer/ACTION_TYPE
的命名形式來(lái)命名action types，因?yàn)榈胶笃诤芏鄏educer攘轩，不同的人協(xié)同工作難免會(huì)出現(xiàn)命名重復(fù)叉存，這樣子加上app和模塊的前綴的話(huà)就不會(huì)出現(xiàn)命名沖突的問(wèn)題。 - 須用大寫(xiě)的蛇形方式
UPPER_SNAKE_CASE來(lái)命名action types撑刺。
名字
作者把這種模式叫做ducks的原因純粹就是根據(jù)redux最后音節(jié)的發(fā)音...
用法
最后的用法也并無(wú)太大差異鹉胖。
下面是combineReducers：
import { combineReducers } from 'redux';
import * as reducers from './ducks/index';
const rootReducer = combineReducers(reducers);
export default rootReducer;
然后是bindActionCreators()：
import * as widgetActions from './ducks/widgets';
或者有時(shí)候需要用枚舉的方式：
import {loadWidgets, createWidget, updateWidget, removeWidget} from './ducks/widgets';
// ...
bindActionCreators({loadWidgets, createWidget, updateWidget, removeWidget}, dispatch);
實(shí)踐
我原來(lái)的項(xiàng)目比較大，直接修改還需時(shí)間够傍，作者的提供的demo有的也過(guò)于龐大有的也比較老了甫菠，因此我在基于那個(gè)簡(jiǎn)單的demo做一些更新與修改，后面會(huì)繼續(xù)更新冕屯。
