Search code examples
javascripttypescriptreact-reduximmutabilityeasy-peasy

Easy Peasy VS React Redux


Recently I found this library: https://easy-peasy.vercel.app/ Implemented it, and must say it was quite nice. Why it is not so popular as redux? why people tend to use redux when they can use this? What are the advantages and disadvantages of both? Also wanted to know how immutability of state is conserved in easy peasy when I can do things like that:

addProduct: action((state, payload) => {
    state.productIds.push(payload);
  })

clearly it mutates the state.. Maybe it doesn't mutate the actual state? In general wanted to know if all redux principles are kept, and what are the main differences between the two?


Solution

  • easy-peasy is an abstraction over Redux, and it uses Redux internally to manage state.

    Some people would choose to use Redux as they would have complete control over how actions, action creators, reducers etc. are implemented. However users of easy-peasy are given an opinionated way of using Redux, which cuts down drastically on the amount of boilerplate you have to write to work with it.

    As for how it enforces immutability in the reducers, whilst the code being written looks like its mutating the data, easy-peasy actually uses Immer "under the hood"; quote from the Immer website:

    "The basic idea is that you will apply all your changes to a temporary draftState, which is a proxy of the currentState. Once all your mutations are completed, Immer will produce the nextState based on the mutations to the draft state. This means that you can interact with your data by simply modifying it while keeping all the benefits of immutable data."

    As is stated on the easy-peasy website, the library allows the extension of the underlying Redux store, which allows you to plug in vanilla Redux middleware/enhancers.