Managing State in React: Exploring Redux 8.x Features

[reboottime]

Overview

In this note, I will delve into the world of redux toolset for managing global state in React applications. This article covers three parts:

• Redux ecosystem for React applications
• Core concepts in redux
• Good redux practices

---

Ecosystem packages

• Redux: the state container for redux-based state management app.
• @reduxjs/toolkit: the official, opinionated, batteries-included toolset for efficient Redux development
• react-redux: The lib to combine redux with react.

---

Core concepts in Redux

1. The single flow of data

Redux implements the single flow of data concept. There are three concepts

• The state, the source of truth that drives our app;
• The view, a declarative description of the UI based on the current state
• The actions, the events that occur in the app based on user input or programmatically triggered, and trigger updates in the state

Through user interaction on the view, an action is triggered, leading to a state change that subsequently updates the user interface.

Derived concepts

• The model in Redux

2. Action creator and reducer

• action: action creator, a function that creates an action
• reducer : A reducer is a pure function that takes the previous state and an action as inputs, and returns a new state for the view. It's important to note that all operations within a reducer function are performed synchronously.

---

[reboottime]

Project structure and naming conventions

1. createSlice

Before the advent of the redux toolkit, managing action types and breaking down a large global state into manageable, cohesive modules was a common challenge faced by many.

The introduction of the Redux Toolkit has proposed a standardized way for modularizing and generating Redux components, exemplified in this Gist. Here are a few key benefits of using the toolkit:

• The counterSlices.actions object provides access to all action creators, with action types generated by these creators having a counter prefix. This enhances both the ease of accessing action creators and understanding action types, as shown in the code example below:

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

• configureStore accepts a reducer to combine the module's initial state value and reducers logics.

export const store = configureStore({
  reducer: counterSlice.reducer,
})

2. Project structure

Redux-related files are organized under the redux folder and named after the respective features they represent.

For a suggested example, please refer to this link.