0.1.1 • Published 8 years ago
redux-config v0.1.1
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