7 mins read

Introduction to Redux for React developers: Concepts and Terminology

If you are a React developer, you have probably heard of Redux. Redux is a state management library that is often used with React. It provides a predictable and centralized way to manage the state of your application, making it easier to debug and maintain.

In this article, we will cover the basic concepts and terminology of Redux. We will explain what Redux is, how it works, and how to use it in your React applications. By the end of this article, you will have a good understanding of Redux and how it can help you build better React applications.

What is Redux?

Redux is a state management library that is often used with React. It provides a centralized way to manage the state of your application. With Redux, you can keep all of your application's state in a single place, called the store.

The store is an object that contains the entire state of your application. You can think of it as a JavaScript object that represents the current state of your application. You can read the state from the store and update the state by dispatching actions.

How does Redux work?

Redux works by following a unidirectional data flow pattern. This means that the data in your application flows in one direction, from the store to the components, and back to the store.

When a component wants to read the state from the store, it dispatches an action. An action is a plain JavaScript object that describes what happened in your application. It contains a type property that describes the type of action, and optionally, a payload property that contains any data associated with the action.

When an action is dispatched, Redux passes it through a reducer function. A reducer function takes the current state of your application and the action, and returns a new state. The new state is then stored in the store.

Once the store is updated, Redux notifies all the subscribed components that the state has changed. The components can then read the new state from the store and re-render themselves with the updated data.

Terminology

To understand Redux, you need to understand the following terms:

Store

Action

An action is a plain JavaScript object that describes what happened in your application. It contains a type property that describes the type of action, and optionally, a payload property that contains any data associated with the action.

Reducer

A reducer is a pure function that takes the current state of your application and an action, and returns a new state. It's called a reducer because it's the type of function that you would pass to the Array.reduce() method in JavaScript.

Dispatch

The dispatch function is used to dispatch an action to the store. When an action is dispatched, Redux passes it through the reducer function, which returns a new state.

The subscribe function is used to listen for changes to the store. When the store is updated, all the subscribed components are notified.

Using Redux with React

To use Redux with React, you need to install the redux and react-redux packages. You can install these packages using npm or yarn.

jsCopy code

npm install redux react-redux

yarn add redux react-redux

Once you have installed these packages, you can create a store using the createStore() function from the redux package.

import { createStore } from 'redux';

const store = createStore(reducer);

In this example, we are creating a store with a reducer function. The reducer function takes the current state and an action, and returns a new state. We will create the reducer function in the next section.

To use the store in your React components, you need to wrap your application in a <Provider> component from the react-redux package. The <Provider> component provides the store to all the child components.

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

function Root() {
  return (
    <Provider store={store}>
      <App />
    </Provider>
  );
}

export default Root;

In this example, we are importing the store from a separate file called store.js. We are then wrapping our <App> component in a <Provider> component, and passing the store as a prop.

To read the state from the store in your components, you can use the useSelector() hook from the react-redux package. The useSelector() hook takes a selector function as an argument, which returns the slice of state that you want to read.

import React from 'react';
import { useSelector } from 'react-redux';

function Counter() {
  const count = useSelector(state => state.count);

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
}

export default Counter;

In this example, we are using the useSelector() hook to read the count property from the state. Whenever the count property in the state changes, the component will re-render with the updated count value.

To update the state in your components, you can use the useDispatch() hook from the react-redux package. The useDispatch() hook returns a reference to the dispatch function, which you can use to dispatch actions to the store.

import React from 'react';
import { useDispatch } from 'react-redux';

function Counter() {
  const dispatch = useDispatch();

  const increment = () => {
    dispatch({ type: 'INCREMENT' });
  };

  const decrement = () => {
    dispatch({ type: 'DECREMENT' });
  };

  return (
    <div>
      <button onClick={decrement}>-</button>
      <button onClick={increment}>+</button>
    </div>
  );
}

export default Counter;

In this example, we are using the useDispatch() hook to get a reference to the dispatch function. We are then defining two functions, increment() and decrement(), which dispatch actions to the store when the buttons are clicked.

Writing a Reducer Function

A reducer function is a pure function that takes the current state and an action, and returns a new state. It's called a reducer because it's the type of function that you would pass to the Array.reduce() method in JavaScript.

Here's an example of a reducer function that handles a counter:

function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

In this example, we are defining a counterReducer function that takes the current state and an action as arguments. We are also defining an initial state object that contains a count property set to 0.

Inside the reducer function, we are using a switch statement to handle different types of actions. When the action type is 'INCREMENT', we are returning a new state object with the count property incremented by 1. When the action type is 'DECREMENT', we are returning a new state object with the count property decremented by 1. If the action type is not recognized, we are returning the current state.

Conclusion

In conclusion, Redux is a popular state management library for React applications that can help simplify your code and make it easier to reason about your application's state. It provides a single source of truth for your application's state, and allows you to easily update and read from that state using a set of well-defined concepts and terminology.

In this article, we covered some of the key concepts and terminology of Redux, including the store, actions, reducers, and selectors. We also provided examples of how to use these concepts in your React components, and how to write a reducer function.

If you're new to Redux, we hope this article has provided you with a good introduction to the library and its concepts. While there is certainly more to learn, mastering the basics of Redux can go a long way towards making your React applications more scalable and maintainable.