Skip to content
Reduces Redux boilerplate
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
test
.babelrc
.gitignore
README.md
package.json

README.md

Redux Module ( Proposal )

Reduced boilerplate for your redux, inspired from Ducks: Redux Reducer Bundles and personally felt the pain of writing too much boilerplate for simple redux apps.

Usage

  1. Create Redux Module
// sideNav.js
// Simple module that is suppose to open and close SideNavigation (hamburger menu) of an app.

import reduxModule from 'redux-module';

const module = reduxModule({
  initialState: {
    isSideNavOpen: false
  },

  reducers: {
    openSideNav: (state) => ({ ...state, isSideNavOpen: true }),
    closeSideNav: (state) => ({ ...state, isSideNavOpen: false })
  }
});

export default module;
  1. Use it with combineReducers (if multiple reducers)
import { combineReducers } from 'redux';
import { getReducersFromModules } from 'redux-module';

import * as allModules from '/modules/index';

export default combineReducers(getReducersFromModules(allModules));
  • Or if you just want to extract reducer from a module
import { getReducerFromModule } from 'redux-module';
const reducer = getReducerFromModule(allModules);
  1. In your Containers/Components use connect the usual way. redux-modules automatically creates key mirroed actions and to use them just extract actions from your modules like below,
import { connect } from 'react-redux';
import { actions } from 'mobile/modules/appState';

@connect(state => ({ appState: state.appState }))
class App extends Component {
  render() {
    const { appState, dispatch } = this.props;

    return (
      <div>
        <button onClick={() => dispatch({type: actions.openSideNav})} >Open SideNav</button>
        <SideNavigation isSideNavOpen={appState.isSideNavOpen} />
      </div>
    );
  }
}

Where the heck are Actions ?

Redux Modules auto generates mirrored key value actions based on function names provided in reducers object when creating Redux Module.

For above reducer you will have following actions available,

import { actions } from 'mobile/modules/appState';

console.log(actions); //{ openSideNav: 'openSideNav', closeSideNav: 'closeSideNav' }

You can now use these actions in your usual way ie,

import { actions } from 'mobile/modules/appState';

// somewhere in the component
dispatch({type: actions.openSideNav})
You can’t perform that action at this time.