Ducks Modular Redux

A proposal for bundling reducers, action types and actions when using Redux

Ducks: Redux Reducer Bundles

Redux , , use case {actionTypes, actions, reducer} . , 95% reducer/actions .

, , .

Common JS .

// 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 
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. **** reducer() export default .
  2. **** action export .
  3. **** npm-module-or-app/reducer/ACTION_TYPE action .
  4. **** action UPPER_SNAKE_CASE export . , reducer action , .

Redux {actionType, action, reducer} .

Java jars beans . Ruby gems . reducer "redux" "ducks" .

 .
import { combineReducers } from 'redux';
import * as reducers from './ducks/index';

const rootReducer = combineReducers(reducers);
export default rootReducer;
 .
import * as widgetActions from './ducks/widgets';

... bindActionCreators() action import .

action export . . **** action export . action , action . .

import {loadWidgets, createWidget, updateWidget, removeWidget} from './ducks/widgets';
// ...
bindActionCreators({loadWidgets, createWidget, updateWidget, removeWidget}, dispatch);

React Redux Universal Hot Example ducks . /src/redux/modules .

 [](https://github.com/erikras/react-redux-universal-hot-example/commit/3fdf194683abb7c40f3cb7969fd1f8aa6a4f9c57).         .

! issue @erikras .

!

-- Erik Rasmussen


C'mon! Let's migrate all our reducers!

Airwolfhound .