redux-kv
key-value util component for redux and redux-react usage
API Reference
install reducer
should placed in redux state.kv
example:
import { reducer as kvReducer } from 'redux-kv'
const reducers = {
// ... your other reducers here...
kv: kvReducer
}
const store = createStore(combineReducers(reducers))
setValue(keyName: String, value: Any)
creates an action to set a single value of a key
example: dispatch(setValue('key', 'value'))
setValues(values: Object)
creates an action to set multiple values
example: dispatch(setValues({ key1: 'v1', key2: 'v2' }))
resetValues
resets all values to undefined
selector(state: ReduxState, [keyName: String])
select needed value or all values from redux state.
usually used in mapStateToProps
method
example:
function mapStateToProps(state) { // used in your own connect method
const { key1 } = kvSelector(state);
const key2 = kvSelector(state, 'key2')
return { key1, key2 };
}
createKV(config: Object)
creates custom reducer, selector, actionCreators, and withKV with options
configs:
- getState: (state) => state.kv // position of reducer
- initialValues: {}
- prefix: 'REDUX_KV'
custom example:
const { reducer, selector, setValue, resetValues } = createKV({
prefix:'CUSTOM_KEY', initialValues: {k: 'defaultValue'},
getState: (state) => state.customOptions,
})
withKV(config: Object)
config properties:
-
keys
: [...String]: used keys in component
component props:
-
kv
{ keys, values, ...keyObjects }-
keys
[...String] : used keys in component -
values
(Object) values of keys -
[keyName]
(Object)-
value
: Any: value of key -
setValue
: function(value: Any): dispatch a set value method to redux store
-
-
quick start:
Step #1: setup reducer to redux store
import { createStore, combineReducers } from 'redux'
import { reducer as kvReducer } from 'redux-kv'
const reducers = {
// ... your other reducers here...
kv: kvReducer
}
const store = createStore(combineReducers(reducers))
Step #2
// using in component:
import { withKV } from 'redux-kv'
class KVView extends Component {
componentDidMount() {
this.props.kv.kName.setValue('hello world')
}
render() {
const { kv } = this.props
return <p>{kv.values.kName}</p> // hello world
}
}
const KVContainer = withKV({
keys: ['kName']
})
// using selector
import { selector as kvSelector } from 'redux-kv'
function mapStateToProps(state) { // used in your connect method
const { key1 } = kvSelector(state);
const key2 = kvSelector(state, 'key2')
return { key1, key2 };
}
// using actionCreators outside
import { setValue, setValues } from 'redux-kv'
function mapDispatchToProps(dispatch) {
return {
setKey1(value) {
return dispatch(setValue('key1', value))
},
setupMultiValues() {
return dispatch(setValues({ key1: 'value1', key2: 'value2' }))
}
}
}
TODOs:
- [x] createKV method document