react-lodux
v1.0.52
Published
Single store module for react in a one-way observable pattern.
Downloads
12
Maintainers
Readme
Deprecated package
This package is deprecated. Please check lodux/react
from package lodux
.
Single store management for react component.
Single store module for react in a one-way observable pattern.
This is the first stable version 1
.
Connects lodux
store and react
component.
To start,
write a 'creator':
A 'creator' is a function of dispatchers and reducers, similar toredux
. Thenconnect(the react class, creator)
.within the
constructor()
of React component:
set the state asthis.state = store.state
. Here thestore.state
is the value of initial store state.And within the
render()
of React component:
reading the state is the ordinary reactthis.state.someproperty
.For activities (updating state):
properties of the dispatchers will be the core of state activities. Usestore['any one of the dispatchers property']
to trigger the corresponding dispatcher, thenreact-lodux
will trigger react'ssetState()
to update thereact
renderer.
summary
trigger a dispatcher -> reducer responses and update store state -> react-lodux
trigger react
's setState()
-> react
renderer refresh
Example
import React, { Component } from 'react';
import { Store, connect } from "react-lodux";
class Counter extends Component {
constructor() {
super();
this.state = store.state;
}
public render() {
return <div>
<p>Current count: {this.state.count}</p>
<a href="#" onClick={()=>store.add(10)}>add</a>
</div>
}
}
const creator = store => {
const dispatchers = {
add: count => store.dispatch({ type: 'add', count })
};
const reducers = () => {
store.reduce('add', action => ({ count: store.state.count + action.count }));
};
return { reducers, dispatchers };
};
const initialState = { count: 13 };
const store = connect(Counter, creator).done();
store.diduce({type:'initial', ...initialState});
API
creator
'creator' is a collection of dispatchers and reducers.
const creator = store => {
const dispatchers = {
add: amount => {
store.dispatch({type:'add', count: amount});
}
};
const reducers = () => {
store.reduce('add', action => ({ ...store.state, count: store.state.count + action.count} }));
};
return { dispatchers, reducers };
};
//An alternative is by using the store.diduce(). Using this alternative free you from writing reducers.
const creator = store => {
const dispatchers = {
add: count => {
store.diduce({type:'add', count: store.state.count + action.count});
}
};
return { dispatchers };
};
Binder
It binds lodux
to React
component. Binder invocation is chainable and communtative (order is irrelevant).
connect(class, creator): binder
const binder = connect(Counter, creator);
applyUndoable(): binder
This will add additional methods (undo, redo) to the store, and applyUndoable()
internally rearranges the store state into {stack[state], future:[]}.
public render() {
return <div>
<p>Current count: {this.state.count}</p>
<a onClick={() => store.add(10)}>add</a>
<a onClick={()=>store.undo()}>undo</a>
<a onClick={()=>store.redo()}>redo</a>
</div>
}
binder = binder.applyUndoable();
//additional properties will be attached to the store
const { state, raw_state /**stack and future**/, undo, redo, add } = store
applyMiddleware(): binder
const log = store => next => (action, func) => {
console.log('log dispatches action', action);
return next(action, func);
};
const binder = binder.applyMiddleware([log]);
done: store
done() should be the last call because it will break the chain and return a store.
//communtative chain invocation
binder = binder.applyUndoable().applyMiddleware([log]);
//same as
binder = binder.applyMiddleware([log]).applyUndoable();
const store = binder.done();
noConflict()
<script src="where /dist/react-lodux.js is located"></script>
//if in conflict
const react_lodux = window['react-lodux'].noConflict();
npm installation
npm install --save react-lodux
testing with HMR
When testing with react-hot-loader
, you might find the whole page being reloaded rather than modular refresh.
It is because react-hot-loader
needs to set up duplicate modules. Duplicate modules leads to duplicate stores. The problem is that lodux
will throw error when there are duplicate stores. When react-hot-loader
encounters exception, it reloaded the whole page.
To enable modular refresh, set the Store configuration to recognize HMR before doing any react-lodux
binding.
Store.config({ isHMR: true });
other notes
ES6 compilation (e.g. webpack ES6 configuration).
No dependencies.