BATMAH69 / react-redux-self

react-redux-self

$ npm install react react-redux redux reselect normalizr
$ npm install react-redux-self --save

Basic Usage

// /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);

API

connect(options)

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).

options.selfID

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.

options.getters[(ownStore, globalStore, ownProps) => ?]

type [Function]. Default null

it is a shortcut for getters of selector. read more about reselect

options.selector(...gettersResults)

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
})

options.reducer(state, action)

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.

options.connectionType

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

options.denormalize = { propName: scheme }

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 ]
 }
})

options.denoralizeFunction(value, schema, entities)

type Function default denormalize (from configuration)

options.denormalizeEntitiesGetter(ownStore, globalStore, ownProps)

type Function default (_1, { entities }) => entities (from configuration)

configure(settings)

You can change global settings of this wrapper

settings.denormalizeEntitiesGetter

Default: (self, storeState) => storeState.entities

settings.denormalizeFunction = null,

Default: denormalize

settings.connectionType = null,

Default: 'global'

settings.reducerName = null

Default: 'self'

actionsFactory(ComponentName) => (ActionName) => computed name

• 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');

reducer

• 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
}));