connect-alike
v1.0.3
Published
Provide local state management without Redux
Downloads
10
Readme
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
- Redux-like Interface, least surprise for Redux users
- Callbacks for communication with other components
- Async Actions Support
- Easy-passing Handlers
How does it work:
To not surprise Redux users, the HOC created by connect-alike mimic a redux workflow.
- Create local state and update by the parent node:
- The
props
passed from the parent to initial (asprops
) and update (asnextProps
) the local state.
- Update local state from the children:
actions
andreducer
generate a set of handlers to update the local state, and the handlers are passed toWrappedComponent
asprops.handlers
by default.
- Communication with other components
- A ensemble of callbacks is generated by
mapPropsToActionCallback
, and every callback is matched with aaction.type
- These callbacks are only possible to be called when
actions
change local state. - When an
action
is triggered by calling handlers, aftersetState
update successfully finished, the HOC will search callbacks inmapPropsToActionCallback
with the matchedaction.type
(all these callbacks are batched into thesetState
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:
mapPropsToState
: used for initializing a HOC state as a Redux-like store. The argument maps the initialprops
inconstructor
andnextProps
incomponentWillReceiveProps
reducers
function of(prevState, action) => nextState
, or nested Object reducers supported by redux-declare.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
andprops.passThrough
; See Document at [actions][actions]
mapPropsToActionCallback
: Function ofprops => {[actionName]: (action, nextState) => callback}
. It enables communication with other components,
- The callback is bound to the setState.
The second set of argument includes
mapStateToProps
: maps the local state and previousprops
to the props of theWrappedComponent
The third set of argument includes
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/
- Simple Counter:
demo/Counter/index.js
- Aysnc Counter:
demo/CounterWithAsync/index.js
- Counter with Logger:
demo/CounterWithLogger/Counter.js