connect-alike

Local State Management for React Component

Developing components with a local state is fine, but the development is often struggling with onChange callbacks, local state management, and async actions in the components. If you do not want a local store or RxJS, and you are familar with Redux, this package provides local state management with

1. Redux-like Interface, least surprise for Redux users
2. Callbacks for communication with other components
3. Async Actions Support
4. Easy-passing Handlers

How does it work:

To not surprise Redux users, the HOC created by connect-alike mimic a redux workflow.

1. Create local state and update by the parent node:

• The props passed from the parent to initial (as props) and update (as nextProps) the local state.

2. Update local state from the children:

• actions and reducer generate a set of handlers to update the local state, and the handlers are passed to WrappedComponent as props.handlers by default.

3. Communication with other components

• A ensemble of callbacks is generated by mapPropsToActionCallback, and every callback is matched with a action.type
• These callbacks are only possible to be called when actions change local state.
• When an action is triggered by calling handlers, after setState update successfully finished, the HOC will search callbacks in mapPropsToActionCallback with the matched action.type (all these callbacks are batched into the setState callback)

Usage

First, like all other npm packages:

npm i --save connect-alike

Then you could build a container by

import connectAlike from 'connect-alike';

let SmartLocalComponent = 
  connectAlike(mapPropsToState, mapPropsToActionCallback, reducers, actions)
              (mapStateToProps)
              (WrappedComponent)

The first set of arguments includes:

1. mapPropsToState: used for initializing a HOC state as a Redux-like store. The argument maps the initial props in constructor and nextProps in componentWillReceiveProps
2. reducers function of (prevState, action) => nextState, or nested Object reducers supported by redux-declare.
3. actions Object of [actionsName]: (payload)=>action, or nested Object actions supported by redux-declare

• You could use dispatch => thunk to apply async actions
• The action handlers are passed to props by props.handlers and props.passThrough; See Document at [actions][actions]

5. mapPropsToActionCallback: Function of props => {[actionName]: (action, nextState) => callback}. It enables communication with other components,

• The callback is bound to the setState.

The second set of argument includes

1. mapStateToProps: maps the local state and previous props to the props of the WrappedComponent

The third set of argument includes

1. WrappedComponent a stateless React Component for wrapping. Recommended to use a dumb component here.

• Functional JSX is not accepted here.

Document

Example

You could have a look on demo/

1. Simple Counter: demo/Counter/index.js
2. Aysnc Counter: demo/CounterWithAsync/index.js
3. Counter with Logger: demo/CounterWithLogger/Counter.js