ReactJs

Redux and React: An Introduction to State Management

Posted on by thuan

React is a popular JavaScript library used for building user interfaces. It provides a simple and efficient way to create reusable UI components. However, as an application grows in size and complexity, managing the state of the application becomes increasingly difficult. This is where Redux comes in.

Redux is a predictable state container for JavaScript applications. It provides a centralized store for managing the state of the application and a set of rules for updating that state in a predictable way. Redux is often used with React, but it can be used with other libraries and frameworks as well.

In this article, we’ll take a look at how to integrate Redux with a React application to manage the state of the application more effectively.

Getting Started with Redux

To use Redux with a React application, we first need to install the necessary packages. We can do this by running the following command:

npm install redux react-redux

Next, we’ll create a store that will hold the state of the application. The store is created using the createStore() function from the redux package.

javascript
import { createStore } from 'redux';

const store = createStore();

The createStore() function takes a reducer function as its argument. The reducer function is responsible for updating the state of the application in response to actions. We’ll take a closer look at reducers in a moment.

Once we have a store, we can use the Provider component from the react-redux package to make the store available to our React components.

javascript
import { Provider } from 'react-redux';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

With this in place, we can start building our application with Redux.

Reducers

As mentioned earlier, the reducer function is responsible for updating the state of the application in response to actions. An action is a plain JavaScript object that describes what happened in the application. The reducer function takes the current state of the application and an action as its arguments and returns a new state.

Here’s an example of a reducer function:

javascript
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, the reducer function takes an initial state object with a count property set to 0. The function then uses a switch statement to check the type of the action and return a new state object based on that type. If the action type is INCREMENT, the function returns a new state object with the count property incremented by 1. If the action type is DECREMENT, the function returns a new state object with the count property decremented by 1. If the action type is not recognized, the function returns the current state object.

Actions and Action Creators

As mentioned earlier, an action is a plain JavaScript object that describes what happened in the application. An action typically has a type property that describes the type of the action and any additional data necessary for updating the state of the application.

Here’s an example of an action:

javascript
{
  type: 'ADD_TODO',
  payload: {
    id: 1,
    text: 'Buy milk',
    completed: false
  }
}

In this example, the action type is ADD_TODO and the payload is an object with an id, text, and completed property.

0368826868