A simple react global state management solution
npm install react-3ducks
Redux is the current prevailing solution to manage global state in React apps. However, there are a few shortcomings to it that this project attempts to address. Some of them are as follows
async/await
or Promise
based semantics that are already known and loved.This is a bare minimum example, Check out this for a (relatively) more elaborate one
//Imports
import React from "react";
import ReactDOM from "react-dom";
import StateStore, {root, container} from "react-3ducks";
//Store class
class CounterStore extends StateStore {
// increment action
increment = () => {
this.setState({count: this.state.count + 1});
}
// decrement action
decrement = () => {
this.setState({count: this.state.count - 1});
}
}
//Components
const Button = ({onClick, text}) => (
<button onClick={onClick}>{text}</button>
)
const Label = ({text}) => (
<span>{text}</span>
)
//Containers
const IncrementButton = container(Button, ({counterStore, props}) => ({
onClick: counterStore.increment,
text: "+"
}));
const DecrementButton = container(Button, ({counterStore}) => ({
onClick: counterStore.decrement,
text: "-"
}));
const CounterDisplay = container(Label, ({counterStore}) => ({
text: counterStore.state.count
}));
//Store instance
const counterStore = new CounterStore({count: 0});
//Root
const App = root(() => (
<div>
<IncrementButton/>
<CounterDisplay/>
<DecrementButton/>
</div>
), {counterStore})
//Render
ReactDOM.render(<App/>, document.getElementById("root"));
See this example in action
Time to introduce the three ducks (i.e. StateStore
, root
, and container
) in react-3ducks
StateStore
classEncapsulates state and behavior. Should be extended to create separate specialized stores for e.g. CartStore, ProductsStore, AuthStore etc.
setState(newState)
MethodsetState
works exactly as it does in React components. It expects a partial object with state changes and merges it into the existing state.
state
Propertystate
also works exactly as it does in React components. Allows readonly access to the current state.
root(Component, {store1, store2, ...})
Higher Order ComponentThe root
HOC accepts a Component and an object containing any stores that should be made available to the container
components under Component
container(Component, mapToProps?)
Higher Order ComponentThe container
HOC passes stores as props to the Component
. Alternatively, if its passed a second (optional) parameter i.e. mapToProps
, it allows to map store state and behavior to props selectively.
mapToProps
This is a selector function that can be optionally passed as a second parameter to the container
HOC to allow for selective mapping of store state and behavior to props passed to the wrapped Component
. Its defined as
function(stores, ownProps)
In the first parameter its passed an object containing all the stores connected to the root
component. The second parameter contains the props passed to the wrapper component created by the container
HOC.
Its expected to return a plain object with prop names as keys, mapped to state or behavior
Contributions are very welcome. Just send a PR against the master branch or open a new issue. Thanks!