Lightweight yet powerful redux solution for data management that reduces boilerplate code necessary for data manipulation.
npm install redux-records
Library has redux as peer dependency, so make sure you have it installed.
All you need to do next is inject records reducer:
import { createStore, combineReducers } from 'redux';
import { reducerFactory, REDUX_PATHS } from 'redux-records';
const store = createStore(
combineReducers({
[REDUX_PATHS.STORE_KEY]: reducerFactory(),
}),
enhancer,
);
export default store;
In case you are using library in react project you might wanna define react container for ease of use:
import React, { Component } from 'react';
import { dataContainer } from 'redux-records'
import { connect } from 'react-redux';
import { compose, bindActionCreators } from 'redux';
const hocContainer = WrappedComponent => class Container extends Component {
componentWillMount() {
const { rr_actions: { onMount } } = this.props;
onMount();
}
componentWillUnmount() {
const { rr_actions: { onUnmount } } = this.props;
onUnmount();
}
render() {
return (<WrappedComponent
{...this.props}
/>);
}
};
const container = (config, mapStateToProps) => compose(
dataContainer(connect, config, mapStateToProps),
hocContainer,
);
export default container;
With container defined you can use it to inject new record types into your presentation components like this:
import dataContainer from '../../components/datacontainer';
const presentationComponent = ...
const simpleUsersComponent = dataContainer('USERS')(presentationComponent);
This will insert Users data and actions for loading, editing, creating and deleting User records.
There multiple ways to initialize data container:
const arrayConfigComponent = dataContainer(['USERS','COMMENTS'])(presentationComponent);
const objectConfigComponent = dataContainer({
storeKey: 'RRECORDS',
dataID: 'id',
dataKey:'USERS',
destroyOnUnmount: false,
initializeOnMount: true,
loadOnMount: false,
relations: {},
})(presentationComponent);
const mixedConfigComponent = dataContainer([{
storeKey: 'RRECORDS',
dataID: 'id',
dataKey:'USERS',
destroyOnUnmount: false,
initializeOnMount: true,
loadOnMount: false,
relations: {},
},
'COMMENTS'])(presentationComponent);
There are few important configuration keys used in configuration of library and in library code, so for easier understanding of library usage and how it works under the hood it's important to understand what they mean:
- storeKey: Store location of root redux-records reducer/state. Default value is 'RRECORDS' and in most cases you don't need to change this value.
- dataKey: Unique Record type identifier, used as part of the store path and action constants
- dataID Record type identifier property, default value is 'id'