Background

Over the last few years, React has catapulted to the top of the list for building reactive user interfaces. The framework incorporates a component-based system, with each component being able to:

• Take input data (accessed via this.props ), and
• Maintaining internal state data (accessed via this.state )

These two concepts allow us to build applications that are able to pass and mutate data with ease. However, with a growing codebase comes a need to maintain a hierarchy of components that are easily testable, debuggable, and reusable. The props of each component remains immutable and cannot cause any behavioral inconsistencies. It is the components’ state that, while passed around and mutated, may cause unpredictable changes to the application and hurt its scalability and maintainability. Enter Redux, a third-party library that acts as a state container by maintaining a centralized state tree and allows mutations by means of emitting actions. Integrating Redux into a React application involves an expensive initial overhead cost, but pays the developer handsomely when the application evolves into one with multiple components that have a reasonable amount of data mutation, where having a single source of truth for the state comes in real handy!

Integrating Redux into a React application involves an expensive initial overhead cost, but pays the developer handsomely when the application evolves into one with multiple components that have a reasonable amount of data mutation, where having a single source of truth for the state comes in real handy!

This article puts together what I find to be a useful mental checklist to use while adding any new _state-related _functionality to a React application. If you don’t have a basic understanding of Redux, this tutorial provides a great introduction!

Assumptions

This tutorial assumes the following:

• An understanding of the React framework, including JSX.
• An understanding of the Redux library, including the entire Redux workflow from providing the application with the **store **to emitting **actions **and performing the appropriate state mutation using the concept of reducers.

The mental checklist involves us walking through an example. We will be working under the assumption that we have an application that has been connected to the store and has a boilerplate for writing actions and reducers. This helps us better appreciate the efficacy of the checklist as we will be adding to an existing codebase and, should we miss a step in the process, open ourselves up to spending a lot of time debugging.

A Short Note on the Example

The example we will be working with is (drumroll…) the todo list! Yes, it’s a cliche and while it does not involve any glorious functionality, it is an extremely effective and intelligible way of explaining concepts :)

We assume we have the following implementations:

• A TodoList component that renders a list of todos.
• A Todo component that renders a single todo item.
• An AddTodo button that, when clicked, emits an action to add the specified todo item to the list.

We will be implementing the following _state-related _functionality:

• A DeleteTodo button that will be placed inside the Todo component and. when clicked, emits an action to delete the corresponding todo item from the list.

#reactjs #react #redux #front-end-development #web-development #programming