可参见: Common JS Example.
// 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 };
}一个模块 ...
- 必须
export default函数名为reducer()的 reducer - 必须 作为函数
export它的 action creators - 必须 把 action types 定义成形为
npm-module-or-app/reducer/ACTION_TYPE的字符串 - 如果有外部的reducer需要监听这个action type，或者作为可重用的库发布时， 可以 用
UPPER_SNAKE_CASE形式 export 它的 action types。
上述规则也推荐用在可重用的redux 库中用来组织{actionType, action, reducer}
Java 有 jars 和 beans. Ruby 有 gems. 我建议我们把这些 reducer 文件包称为 "ducks"，也就是 "redux" 的结尾音。
你可以这样:
import { combineReducers } from 'redux';
import * as reducers from './ducks/index';
const rootReducer = combineReducers(reducers);
export default rootReducer;你也可以这样:
import * as widgetActions from './ducks/widgets';... 这样它只会引入action creators, 可以传给bindActionCreators().
如果你除了action creator 以外，还 export 了其他的变量/函数，也没有问题。上面的规则并不是说你 只能 export action creators 。如果是这种情况，你需要做的就是把你需要的action creator 引入，然后传给 bindActionCreators
import {loadWidgets, createWidget, updateWidget, removeWidget} from './ducks/widgets';
// ...
bindActionCreators({loadWidgets, createWidget, updateWidget, removeWidget}, dispatch);React Redux Universal Hot Example uses ducks. See /src/redux/modules.
迁移代码结构的过程堪称无痛, 我能够预见到这样做会减少很多的开发痛苦。
有任何问题或者反馈欢迎通过新建github issue 或者 tweet 到 @erikras。
编码愉快!
-- Erik Rasmussen
Photo credit to Airwolfhound.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent