context + state = constate
~2kB React state management library that lets you work with local state and scale up to global state with ease when needed.
Demo: https://codesandbox.io/s/7p2qv6mmq
npm i -S constateTable of Contents
You can start by creating your State component:
import React from "react";
import { State } from "constate";
export const initialState = {
count: 0
};
export const actions = {
increment: amount => state => ({ count: state.count + amount })
};
export const selectors = {
getParity: () => state => (state.count % 2 === 0 ? "even" : "odd")
};
const CounterState = props => (
<State
initialState={initialState}
actions={actions}
selectors={selectors}
{...props}
/>
);
export default CounterState;Note: the reason we're exporting
initialState,actionsandselectorsis to make testing easier.
Then, just use it elsewhere:
const CounterButton = () => (
<CounterState>
{({ count, increment, getParity }) => (
<button onClick={() => increment(1)}>{count} {getParity()}</button>
)}
</CounterState>
);Whenever you need to share state between components and/or feel the need to have a global state, you can pass a context property to State and wrap your app with Provider:
const CounterButton = () => (
<CounterState context="counter1">
{({ increment }) => <button onClick={() => increment(1)}>Increment</button>}
</CounterState>
);
const CounterValue = () => (
<CounterState context="counter1">
{({ count }) => <div>{count}</div>}
</CounterState>
);
const App = () => (
<Provider>
<CounterButton />
<CounterValue />
</Provider>
);This is still React, so you can pass new properties to CounterState, making it really composable.
First, let's change our CounterState so as to receive new properties:
const CounterState = props => (
<State
{...props}
initialState={{ ...initialState, ...props.initialState }}
actions={{ ...actions, ...props.actions }}
selectors={{ ...selectors, ...props.selectors }}
/>
);Now we can pass new initialState, actions and selectors to CounterState:
export const initialState = {
count: 10
};
export const actions = {
decrement: amount => state => ({ count: state.count - amount })
};
const CounterButton = () => (
<CounterState initialState={initialState} actions={actions}>
{({ decrement }) => <button onClick={() => decrement(1)}>Decrement</button>}
</CounterState>
);Those new members will work even if you use context.
It's possible to pass initialState to Provider:
const initialState = {
counter1: {
count: 10
}
};
const App = () => (
<Provider initialState={initialState}>
...
</Provider>
);This way, all State with context="counter1" will start with { count: 10 }
Note: while using context, only the
initialStateof the firstStatein the tree will be considered.Providerwill always take precedence overState.
As stated in the official docs, to access state in lifecycle methods you can just pass the state down as a prop to another component and use it just like another prop:
class CounterButton extends React.Component {
componentDidMount() {
this.props.state.increment(1);
}
render() {
const { increment } = this.props.state;
return <button onClick={() => increment(1)}>Increment</button>;
}
}
export default props => (
<CounterState context="counter1">
{state => <CounterButton {...props} state={state} />}
</CounterState>
);Another alternative is to use https://github.com/reactions/component:
import Component from "@reactions/component";
const CounterButton = () => (
<CounterState context="counter1">
{({ increment }) => (
<Component didMount={() => increment(1)}>
<button onClick={() => increment(1)}>Increment</button>
</Component>
)}
</CounterState>
);actions and selectors are pure functions. Testing is pretty straightfoward:
import { initialState, actions, selectors } from "./CounterState";
test("initialState", () => {
expect(initialState).toEqual({ count: 0 });
});
test("actions", () => {
expect(actions.increment(1)({ count: 0 })).toEqual({ count: 1 });
expect(actions.increment(-1)({ count: 1 })).toEqual({ count: 0 });
});
test("selectors", () => {
expect(selectors.getParity()({ count: 0 })).toBe("even");
expect(selectors.getParity()({ count: 1 })).toBe("odd");
});Properties
childrenReact.NodeinitialStateObject?
Properties
If you find some bug, please create an issue providing instructions to reproduce it. It's always very appreciable if you find the time to fix it. In this case, please submit a PR.
If you're a beginner, it'll be a pleasure to help you contribute. See the beginner's guide to contributing to a GitHub project.
Make sure to install dependencies (yarn or npm install) and to lint and test the code before submitting the PR (yarn lint && yarn test).
- Side effects / async actions (#1)
- Middlewares? (create an issue if you find a use case for this)
- Debugger/devtools
MIT © Diego Haz
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent