$ npm install react react-redux redux reselect normalizr
$ npm install react-redux-self --save
// /index.js
import { render } from 'react-dom';
import { reducer } from 'react-redux-self';
import { combineReducers, Provider, createStore } from 'react-redux';
import MyComponent from './components/MyComponent';
const store = createStore(combineReducers({
self: reducer
}));
render((
<Provider store={store}>
<MyComponent />
</Provider>
));
// /components/MyComponent.jsx
import React, { PropTypes } from 'react';
const MyComponent = ({ name, handleChange }) => (
<div>
<h1>Hello! {name}</h1>
<button type="button" onClick={handleChangeName}>Change My Name To Silvia!</button>
</div>
);
MyComponent.propTypes = {
name: PropTypes.string.isRequired,
handleChangeName: PropTypes.func.isRequired
};
export default MyComponent;
// /components/MyComponent.store.js
import { actionsFactory } from 'react-redux-self';
const action = actionsFactory('MyComponent');
const CHANGE_NAME = action('CHANGE_NAME');
const changeNameAction = (newName) => ({
type: CHANGE_NAME,
payload: { name: newName }
});
export default (state = { name: 'John' }, action) => {
if (action.type === CHANGE_NAME) {
return {
...state,
name: action.payload.name
};
}
return state;
};
// /components/MyComponent.container.js
import { compose, withHandlers } from 'recompose';
import MyComponent from './MyComponent.jsx';
import { connect } from 'react-redux-self';
import reducer, { changeNameAction } from './MyComponent.store.js'
export default compose(
connect({
reducer,
mapDispatchToProps: { changeNameAction }
}),
withHandlers({
handleChangeName: ({ changeNameAction }) => () => {
changeNameAction('Silvia');
}
})
)(MyComponent);
Connect is wrapper of "native" react-redux
connect.
It provides selector
and denormalize
helpers to improve development experience.
It provides the component's reducer. It can store data inside and you can use this component several times on the page and this data will not be crossing (there is full isolation between the components).
type String
. Default null
Basic selfID of the component.
You can change it if you specify the prop selfID deliberately on the component like <MyComponent selfID="some">
it can help you find it to control remotely by action creators
.
type [Function]
. Default null
it is a shortcut for getters of selector. read more about reselect
type Function
. Default null
.
It is a shortcut for createSelector
factory. read more about it here
It receives all arguments as results of getters
functions
connect({
getters: [
(ownStore, globalStore, ownProps) => ownStore
],
selector: (ownStore) => ownStore
})
type Function
or [Function]
. Default null
It creates it's own store in this component.
if reducer !== null
and selector === null
and getters === null
. Selector and getter will be pointing to it's own store first.
type String
. Default global
It defines the kind of the store you need: global
, isolated
, set-state
Only global type is implemented, but other types are in short-term plans
type Object
. Default null
It is a simple shortcut for map denormalization that provides by normalizr
. read more about normalizr
const someEntityScheme = new Entity('some');
const someArrayItemScheme = new Entity('someArrayItem');
connect({
denormalie: {
pathToProp: someEntityScheme,
pathToAnotherProp: [ someArrayItemScheme ]
}
})
type Function
default denormalize
(from configuration)
type Function
default (_1, { entities }) => entities
(from configuration)
You can change global settings of this wrapper
Default: (self, storeState) => storeState.entities
Default: denormalize
Default: 'global'
Default: 'self'
- simple shortcut for using optimizations in self store.
this approach allows to use any action name you want without fear about of aciton-name collisions
import { actionsFactory } from 'react-redux-self';
const action = actionsFactory('MyComponent');
const SOME_ACTION = action('SOME_ACTION');
- global reducer to connect "self" store into your actual global store
import { reducer as selfReducer } from 'react-redux-self';
import { combineReducers, Provider, createStore } from 'react-redux';
const store = createStore(combineReducers({
self: selfReducer
}));