Repository files navigation

import{Module}from'react-redux-modules';exportdefaultnewModule('MyModule');

A module ties together the components of a react-redux module. The reducer, actions and side effects are allcovered by module configurations. Modules also handle elements outside the redux state, like navigation andthe default react component.

The only requirement for module is its name. The empy module shown above will generate a new section of the reduxstate calledMyModule, but other than that do nothing.

// - /myModule/module.jsimport{Module}from'react-redux-modules';importMainComponentfrom'./MainComponent';exportdefaultnewModule('MyModule',{component:MainComponent});

// - /myModule/MainComponent.jsimportReactfrom'react';import{connect}from'react-redux-modules';importmodulefrom'./module';functionMainComponent(){return<h1>Hello World</h1>;}exportdefaultconnect(()=>module,MainComponent);

Thecomponent property of a module is the component that is rendered when this module is navigated to. Thecomponent is not connected to the redux state by default, use theconnect function to connect this (or any)component to the module state. By defaultconnect binds the entire module state subtree, plus dispatchersfor all module actions. The props bound from the state can be overriden by providing a staticmapStateToProps(localState, state, ownProps) on the component. Note that the first argument is the modulestate subtree, you can use this to not care about where this module falls in the application structure if itsirrelevant to you. Sometimes accessing state outside of your module is necessary, like getting the currentlylogged in user, for this reason the complete state tree is also provided.

import{Module}from'react-redux-modules';importMainComponentfrom'./MainComponent';import{set}from'lodash/fp';exportdefaultnewModule('MyModule',{component:MainComponent,initialState:{counter:0},reducers:{onCount:(state,payload)=>set('counter',state.counter+1,state)}});

Reducers are defined as a map of action names to reducer functions. The module combines these with any submodulereducers and builds the whole thing for you.initialState is optional and is empty by default.

import{Module}from'react-redux-modules';importMainComponentfrom'./MainComponent';exportdefaultnewModule('MyModule',{component:MainComponent,effects:{yell:()=>alert('HELLO WORLD')}});

Effects are tied to a single action and will be triggered after the action is reduced. Effects are plain functionsand can be used for whatever side effects you want, async, whatever. For your pleasure these things arepassed as an object to the effect function:{state, localState, action, payload, dispatch, actions} whereactionsis a map of action dispatchers for each action in this module. The actions passed into the effect are already wrapped with dispatch. The actualdispatch function is also passed in case you need to dispatch an action from another module.

import{Module}from'react-redux-modules';importotherModulefrom'../other/place/module';importMainComponentfrom'./MainComponent';exportdefaultnewModule('MyModule',{component:MainComponent,effects:{alarm:({actions})=>actions.snooze(),snooze:({dispatch})=>dispatch(otherModule.actions.snooze())}});

Any action referenced in either the reducer or effect configs (doesn't have to be in both) gets an automatically generatedaction creator inmodule.actions. If a component is connected all module actions are bound to its props bydefault, so callingthis.props.actionName() will dispatch the actionactionName. If you want to dispatch an actionfrom a different module, you can, but you have to import the module and call dispatch explicitly:this.props.dispatch(otherModule.actions.actionName()). Action creators accept one argument which is mapped topayload in reducers and effects.

import{Module}from'react-redux-modules';importMainComponentfrom'./MainComponent';importotherMoudlefrom'../otherModule';exportdefaultnewModule('MyModule',{component:MainComponent,navigationOptions:{title:'Home',},effects:{goSomewhere:({dispatch})=>dispatch(otherModule.actions.navigate())}});

Each module automatically gets anavigate action which tells the navigator to focus that module. Internally navigationis handled byreact navigation and there is a there is anavigationOptions configurationwhich gets mapped tothis for configuring the navigator.

import{Module}from'react-redux-modules';importMainComponentfrom'./MainComponent';importsubmodule1from'./submodule1';importsubmodule2from'./submodule2';exportdefaultnewModule('MyModule',{component:Component,submodules:[submodule1,submodule2]});

Submodules are mostly a way to not have one giant list of modules in yourApp.js, each module will automaticallyinclude its submodule's reducers and introduce the submodules to the navigator.

import{createAppContainer,Module}from'react-redux-modules';importmodule1from'./module1';importmodule2from'./module2';constapp=newModule('App',{submodules:[module1,module2,]});// for exporeturncreateAppContainer(app);// for webconst{Container}=createAppContainer(app);ReactDOM.render(React.createElement(Container),document.getElementById('root'));

createAppContainer inspects your module tree and generates a redux store, reduxreducers, navigation router, sets up the required redux and navigation react components for you, and returns that.