[RFC] New dependency: Easy Peasy State Management

New Dependency

Name: easy-peasy URL: https://github.com/ctrlplusb/easy-peasy

Focus

Easy Peasy is a popular state management solution built on battle tested redux. It provides a modern API and comes with everything one needs to quickly manage inter-component state without needing to write everything from scratch. It has first class TypeScript support, gives us access to the redux middleware system, comes with an immer-based state update patterns, and proves some excellent (and simple) abstractions around observing actions within a system and acting on them without having to write mountains of glue code.

Example from docs:

const store = createStore({
  todos: {
    items: ['Create store', 'Wrap application', 'Use store'],
    add: action((state, payload) => {
      state.items.push(payload)
    })
  }
});

function App() {
  return (
    <StoreProvider store={store}>
      <TodoList />
    </StoreProvider>
  );
}

function TodoList() {
  const todos = useStoreState(state => state.todos.items)
  const add = useStoreActions(actions => actions.todos.add)

  return (
    <div>
      {todos.map((todo, idx) => <div key={idx}>{todo}</div>)}
      <AddTodo onAdd={add} />
    </div>
  )
}

Going forward Eigen would benefit from a consistent, hooks-based batteries-included state management pattern.

Check List

• Have read over the source code, and we can maintain it
• Has had a release in the last year, or looks done and stable

Alternatives

There are quite a few alternatives in the react state management space. We could use redux directly, but the common complaint is that it’s too verbose. We could also use react’s context directly, but that would mean a lack of consistency, needing to hand-roll perf optimizations, no middleware, etc.

[ashfurrow]

Okay, thanks for the discussion so far everyone! Here’s a recap of what I have learned:

• Eigen could already benefit from a better way to manage global state than React Context, and this need will only increase over time.
• easy-peasy seems like a good solution for managing global state.
• For the immediate need, Consignments in specific could benefit from this solution.

Therefore, I think:

• We need to answer @pepopowitz’s question: is easy-peasy is the go-to solution for all state management in Eigen, or if it should be just for complex state? I’m curious to hear what others think. We should document our decision here.
• We can accept this RFC. I’m satisfied this makes sense, but I’m still open to hearing from those who disagree.
• To help facilitate this transition, we should convert (at least some of) the existing uses of createContext to use easy-peasy. Ideally in a group, maybe a Knowledge Share or a Lunch & Learn. It’s really important to me that we socialize this change and make sure everyone is supported here. @ds300 do you think that the filters would be a good place to start, or should we begin smaller?

Are there any other questions/concerns anyone has? This is the exact right time to bring them up 🙌

[damassi]

I would imagine a context being used in a situation that may grow into a library that can be extracted from eigen where we’d want to keep the external dependency count low. (Though even in that case, personally, I’d rather use a proper state management solution than roll my own.)

Mentioned above, every time React.useContext is written it means a dev is creating their own custom API for shared state, because useContext doesn’t come with an API. Unless there’s some truly crazy unexpected thinking involved, the API uniquely created for that useContext call will look very, very similar to what we’d get out of the box with easy-peasy, only more complicated and requiring more lines of code with less amenities. For maintainability through time, less is more.

All of this is to say, in my ideal gate-keeper world I would see createContext as tech debt.