redux-config
v0.1.1
Published
Rapidly config Redux or React Redux
Downloads
125
Readme
Redux Config
Rapidly config Redux or React Redux.
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);
How Does It Work?
License
MIT