immer-wieder

import createContext from 'immer-wieder'

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 } } }
      }),
  },
}))

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>
)

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>
)