Redux-config NPM

Redux Config

Installation

This assumes that you're using npm package manager.

npm install --save redux-config

Usage

1. Configure redux actions and reducers in a config file (e.g. `redux/config.js`)

export const reduxStore1 = {
  default: { param1: '', param2: '' },
  actions: {
    UPDATE_REDUX_STORE1: {
      inputs: ['param1', 'param2'],
      reducer: 'MERGE', // pre-defined reducer function
    },
    CLEAR_REDUX_STORE1: {
      inputs: [],
      reducer: state => {
        return { param1: '', param2: '' };
      },
    },
  }
};

export const reduxStore2 = {
  default: { list: [] },
  actions: {
    SET_REDUX_STORE2: {
      params: ['list'],
      reducer: 'SET', // pre-defined reducer function
    },
    CLEAR_REDUX_STORE2: {
      params: [],
      reducer: 'CLEAR', // pre-defined reducer function
    }
  },
};

1.1. Predefined reducer functions

See src/parsers/reducerFunctions.js

2. Initialize redux store (e.g. `redux/index.js`)

import {
  createStore,
  combineReducers,
} from 'redux'

import configureRedux from 'redux-config'
import * as config from './config' // read config file
const { actions, reducers } = configureRedux(config)

const store = createStore(combineReducers(reducers));

module.exports = {
  actions,
  store,
};

3. Use actions and reducers in React components

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { actions } from 'path/to/redux'

class ReactComponent extends Component {
  ...
  
  // the method that calls the redux action
  callReduxAction(val1, val2) {
    this.props.actions.UPDATE_REDUX_STORE1({ param1: val1, param2: val2 });
  }
  
  ...
  
  render() {
    ...
    
    // read data from redux store
    const reduxStore1Param1 = this.props.reduxStore1.param1;
    const reduxStore2List = this.props.reduxStore2.list;
    
    ...
  }
}

function mapStateToProps(state) {
  return {
    reduxStore1: state.reduxStore1,
    reduxStore2: state.reduxStore2
  };
}

module.exports = connect(mapStateToProps, actions)(ReactComponent);