Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/deadivan/ducks-modular-redux below:

deadivan/ducks-modular-redux: A proposal for bundling reducers, action types and actions when using Redux

可参见: 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 };
}

一个模块 ...

1. 必须 export default 函数名为 reducer() 的 reducer
2. 必须 作为函数 export 它的 action creators
3. 必须 把 action types 定义成形为 npm-module-or-app/reducer/ACTION_TYPE 的字符串
4. 如果有外部的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.

Todomvc using ducks.

迁移代码结构的过程堪称无痛, 我能够预见到这样做会减少很多的开发痛苦。

有任何问题或者反馈欢迎通过新建github issue 或者 tweet 到 @erikras。

编码愉快!

-- Erik Rasmussen

Photo credit to Airwolfhound.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4