Redux: My Initial Thoughts

When building non trivial apps with more than a few components needing access to shared state, I like to use a state management framework to keep my state and state update logic in a central and standardized location ourside of any component. This allows my components to directly access state (see right) instead of having to use chains of input params and callbacks to read and update state (see left).

In Angular, my preferred state management framework is NgRx. When searching for a similar framework to use with React, I initially looked at React's built in Reducer, but it lacked a mechanism to handle side effects similar to Effects in NgRx, so I ended up choosing Redux. In this post I will share my initial thoughts regarding Redux from the perspective of a NgRx user after reading the official docs and refactoring my Timesheet app from my previous post to use Redux.

Setup

Project setup was very easy using the create-react-app with the redux-typescript template. It installed Redux Toolkit which provides some abstractions and helpers to make it easier to work with Redux. The included sample Counter feature was helpful as I used it as a reference for implementing my own features.

Reducers

Creating Reducers in Redux was similar to NgRx. Each feature has its own Reducer, referred to as a Slice in Redux, which encapsulates the state, actions, and state update logic for each feature of my app. I liked how Redux is able to infer the Actions and its payload from the method signatures of my Reducer functions so I do not have to manaually define them like in NgRx.

Side Effects

NgRx and Redux differs the most in how they implement side effects such as fetching data from the server. In NgRx, the Effect function containing the side effect logic and the Action which triggers it are separate entities, while in Redux, both concerns are combined into a single entity in the form of a Thunk function. In my opinion, NgRx's implementation is a bit more intuative because it allows me to think of everything in terms of Actions instead of Actions or Thunks, although the tradeoff for decoupling the Action and Effect in NgRx is writting a bit more code. I also think the learning curve for NgRx is higher because it uses RxJs to write Effects, although this might not be an issue for Angular developers.

Selectors

Selectors are implemented similarly in Redux and NgRx.

Final Thoughts

Learning Redux seemed daunting at first given the amount of documentation available on it, but I was able to get up speed pretty quickly by just going through the tutorial from official docs, perhaps because I've already used NgRx. Overall, I like the framework and will be using it in my future React projects.