Ducks: Redux Reducer Bundles

redux`{actionTypes, actions, reducer}`95% reducer/actions actions

: 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. reduceraction 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

Translation

Photo credit to Airwolfhound.

---