Ducks++: Redux Reducer Bundles – Djamel Hassaine – Medium

Ducks++: Redux Reducer Bundles  #javascript #redux #react #reactjs

  • The original Ducks standard requires that for each module the associated {actionTypes, actions, reducer} should be kept in one file.
  • Finally the default export should be an object which includes the {actionTypes, actions, reducer, selectors, mountPoint}.
  • ExampleA duck module for handling error state in an app:// errors.jsimport {createSelector} from ‘reselect’;import {fromJS, List} from ‘immutable’;const STORE_MOUNT_POINT = ‘globals/errors’;const ADD_GLOBAL_ERROR = ‘UTILS:ADD_GLOBAL_ERROR’;const CLEAR_GLOBAL_ERRORS = ‘UTILS:CLEAR_GLOBAL_ERROR’;// Actionsconst addGlobalError = error = ({ type: ADD_GLOBAL_ERROR, payload: error});const clearGlobalErrors = () = ({ type: CLEAR_GLOBAL_ERRORS});// Selectorsconst getGlobalErrors = state = selectGlobalErrors = createSelector( getGlobalErrors, errors = errors.toJS());const initialState = fromJS({ errors: []});//reducerconst reducer = (state = initialState, action = {}) = { switch (action.type) { case ADD_GLOBAL_ERROR: return state.set(‘errors’, case CLEAR_GLOBAL_ERRORS: return state.set(‘errors’, List()); default: return state; }};// interfaceconst errors = { mountPoint: STORE_MOUNT_POINT, actionTypes: {ADD_GLOBAL_ERROR, CLEAR_GLOBAL_ERRORS}, actionCreators: {addGlobalError, clearGlobalErrors}, selectors: {selectGlobalErrors}, reducer};export default errors;Usage// store.jsimport { combineReducers } from ‘redux’;import * as ducks from ‘.
  • /ducks/index’;function mapDucksToReducers(ducks) { const reducers = Object.keys(ducks).
  • map(key = { const duck = ducks[key]; return { [duck.mountPoint]: duck.reducer }; }); return Object.assign({}, …reducers);}const rootReducer = default rootReducer;A react error display component:// Warning.jsimport React from ‘react’;import {connect} from ‘react-redux’;import globalErrors from = { label: React.PropTypes.string};const Warning = ({dismissAction, errors=”}) = ( div {errors} button /div );Warning.propTypes = { dismissAction: errors: React.PropTypes.string};const mapStateToProps = state = ({ errors: mapDispatchToProps = dispatch = ({ dismissAction: () = WarningContainer = connect( mapStateToProps, {WarningContainer as default, Warning};Photo credit to Airwolfhound

This is an enhancement to the original Ducks proposal. Basically, the concept is keep redux functionality as modular as possible. The original Ducks standard requires that for each module the…

@_adeeb: Ducks++: Redux Reducer Bundles #javascript #redux #react #reactjs

A duck module for handling error state in an app:

import {createSelector} from ‘reselect’;

import {fromJS, List} from ‘immutable’;

const STORE_MOUNT_POINT = ‘globals/errors’;

const ADD_GLOBAL_ERROR = ‘UTILS:ADD_GLOBAL_ERROR’;

const CLEAR_GLOBAL_ERRORS = ‘UTILS:CLEAR_GLOBAL_ERROR’;

type: ADD_GLOBAL_ERROR,

payload: error

type: CLEAR_GLOBAL_ERRORS

const getGlobalErrors = state => state[STORE_MOUNT_POINT].get(‘errors’);

getGlobalErrors,

errors: []

case ADD_GLOBAL_ERROR:

return state.set(‘errors’, state.get(‘errors’).push(action.payload));

case CLEAR_GLOBAL_ERRORS:

return state.set(‘errors’, List());

default:

return state;

mountPoint: STORE_MOUNT_POINT,

actionTypes: {ADD_GLOBAL_ERROR, CLEAR_GLOBAL_ERRORS},

actionCreators: {addGlobalError, clearGlobalErrors},

selectors: {selectGlobalErrors},

export default errors;

import { combineReducers } from ‘redux’;

import * as ducks from ‘./ducks/index’;

[duck.mountPoint]: duck.reducer

return Object.assign({}, …reducers);

export default rootReducer;

A react error display component:

import React from ‘react’;

import {connect} from ‘react-redux’;

import globalErrors from ‘state/errors’;

dismissAction: React.PropTypes.func.isRequired,

)(Warning);

export {WarningContainer as default, Warning};

Ducks++: Redux Reducer Bundles – Djamel Hassaine – Medium