immer-wieder is an api-compatible wrap around Reacts context, behaving the same way with the distinction that you can
- provide actions
- mutate state directly instead of writing reducers (it's using immer)
- optionally select state, so that components only render when the state they subscribe to changes
If you look at the code it should become clear that it lets React do all the work in order to create as little surface for maintenance and bugs as possible.
Install
npm install immer-wieder
Import
import createContext from 'immer-wieder'Create context
const { Provider, Consumer } = createContext((setState, getState) => ({
// Everything in here is your state
bands: {
0: { name: 'Flipper' },
1: { name: 'Melt Banana' },
},
ids: [0, 1],
// Including actions, which you can wrap and nest, makes it easier to access them later ...
someActions: {
// Actions do not have to mutate state at all, use getState to access current state
cacheState: id => getState(state => fetch(`/backend?cache=${state.stringify()}`),
// Actions can be async naturally
fetchState: async () => {
try {
const res = await fetch(`/backend?state`)
setState(await res.json())
} catch(error) {
setState({ error })
}
},
// Otherwise setState behaves like always
removeAll: () => setState({ bands: {}, ids: [] }),
// With the distinction that you mutate drafts, thanks to immer
changeName: (id, name) =>
setState(state => {
// You are allowed to mutate state in here ...
state.bands[id].name = name
// Or return a reduced shallow clone of state like always
// return { ...state, users: { ...state.users, [id]: { ...state.users[id], name } } }
}),
},
}))Provide once, then consume, anywhere within the providers tree
const App = () => (
// Provide state, everything withing can have selective access to it
<Provider>
<Consumer select={store => store.ids}>
{ids => ids.map(id => <EditDetails key={id} id={id} />)}
</Consumer>
</Provider>
)
const EditDetails = ({ id }) => (
// Select is optional, if present the component renders only when the state you select changes
// Actions can be fetched right from the store
<Consumer select={store => ({ ...store.bands[id], ...store.someActions })}>
{({ name, changeName }) => (
<div>
<h1>{name}</h1>
<input value={name} onChange={e => changeName(id, e.target.value)} />
</div>
)}
</Consumer>
)Inline mutations using void
Draft mutations usually warrant a code block, since a return denotes a overwrite in immer. Sometimes that can stretch code a little more than you might be comfortable with. In such cases you can use javascripts void operator, which evaluates expressions and returns undefined.
// Single mutation
setState(state => void (state.user.age += 1))
// Multiple mutations
setState(state => void (state.user.age += 1, state.user.height = 186))What about HOCs?
Sometimes you need to access state in lifecycles or maybe you just don't like render props at all.
import createContext from 'immer-wieder'
const { Provider, hoc } = createContext((setState, getState) => ({ ... }))
@hoc((store, props) => ({ item: store.items[props.id] }))
class Item extends Component {
render() {
return <div>{this.props.item}</div>
}
}
const App = () => (
<Provider>
<Item id={1} />
</Provider>
)Contributions
All my open source projects are done in my free time, if you like any of them, consider helping out, all contributions are welcome as well as donations, for instance through Patreon.