How to use Reducers effectively ( React Redux )

Reducers are part of Redux (which is a predictable state container for JS apps). Redux is used mostly for application state management in JS frameworks/libraries. Redux maintains the state of an entire application in a single immutable state tree (object) which cannot be changed directly. To change something, a new object must be created (using actions and reducers). In this tutorial, you'll see How to use Reducers effectively ( React Redux )

Reducers are part of Redux (which is a predictable state container for JS apps). Redux is used mostly for application state management in JS frameworks/libraries. Redux maintains the state of an entire application in a *single immutable state tree (object) *which cannot be changed directly. To change something, a new object must be created (using actions and reducers).

So what are reducers anyway?

Reducers are used in response to an action that is sent to the store (a single immutable store). Reducers specify how the application’s state changes while action only describes what happens. You can think of reducers like a state changer, Let’s take an example of simple application where you want to display a list of food dishes using React js with Redux. Now, this list will usually have 3 actions:

i) DISHES_LOADING: which indicates dishes are been loading.

ii) DISHES_FAILED: which indicates the application failed to fetch the dishes details.

iii) ADD_DISHES: This indicates adding new dishes to a list.

Fig.1. ActionTypes.jsx file

Fig.2. Dishes Reducer

Here you can see we don’t mutate the state, we simply create a return the new copies of the object. The default state returns the previous state.

reactjs react reducer react-js-tutorials redux

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

The React Redux Tutorial will help you in understanding the fundamentals of Redux and help you in integrating Redux with React.

In this article, we will look at how to reduce the boilerplate code brought about by Actions and Reducers using Redux-Actions

We will learn about state in this part, but let’s first understand the difference between state and props.

Are you looking for some new react js to expand your skills or to explore the possibilities of react js, have a look at these projects : Project 1: Next.js React GraphQL Express Apollo Boilerplate If you are a react js developer who uses GraphQL, Next.js, Express, and Apollo regularly ( well I do ) then, give this boilerplate a go.