Brucbbro/immer-wieder

✨ React 16 context wrap with redux semantics powered by immer

immer-wieder is an api-compatible wrap around Reacts context, behaving the same way with the distinction that you can

1. provide actions
2. mutate state directly instead of writing reducers (it's using immer)
3. 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>
)

Demo: Provider & 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.