ReactJs

React Redux: A Complete Guide to State Management

Posted on by thuan

React is a popular JavaScript library for building user interfaces, and Redux is a state management library that complements React. Redux provides a centralized store that manages the state of your application, making it easier to manage and update the state of your application.

In this article, we’ll explore Redux and how it works with React to provide a complete solution for state management in your application.

What is Redux?

Redux is a state management library that provides a centralized store for managing the state of your application. The state of your application is stored in a single object called the store, which can be updated using actions.

Actions are plain JavaScript objects that describe the changes you want to make to the state. Each action has a type property that describes the type of action and a payload property that contains the data associated with the action.

Reducers are functions that take the current state and an action and return the new state. Reducers are pure functions, meaning that they don’t modify the current state or the action. Instead, they return a new state based on the current state and the action.

Setting up Redux with React

To use Redux with React, you’ll need to install the required packages:

javascript
npm install redux react-redux

Once you’ve installed these packages, you can set up Redux in your application by creating a store and wrapping your application in a Provider component:

javascript
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

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

Actions

Actions are plain JavaScript objects that describe the changes you want to make to the state. Each action has a type property that describes the type of action and a payload property that contains the data associated with the action.

Actions are created using action creators, which are functions that return an action object. Here’s an example of an action creator:

javascript
export const addToCart = (product) => {
  return {
    type: 'ADD_TO_CART',
    payload: product
  }
}

Reducers

Reducers are functions that take the current state and an action and return the new state. Reducers are pure functions, meaning that they don’t modify the current state or the action. Instead, they return a new state based on the current state and the action.

Here’s an example of a reducer:

javascript
const initialState = {
  cart: []
};

const cartReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'ADD_TO_CART':
      return {
        ...state,
        cart: [...state.cart, action.payload]
      };
    default:
      return state;
  }
};

Connect

The connect function is used to connect your React components to the Redux store. It’s a higher-order component that takes a component and returns a new component that’s connected to the store.

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

const MyComponent = ({ cart }) => {
  // Render cart items
};

const mapStateToProps = (state) => {
  return {
    cart: state.cart
  };
};

export default connect(mapStateToProps)(MyComponent);

Thunks

Thunks are functions that return another function. They’re often used to handle asynchronous actions, such as fetching data from a server.

javascript
import { createAsyncThunk } from '@reduxjs/toolkit';
import api from '../api';

export const fetchProducts = createAsyncThunk(
  'products/fetchProducts',
  async () => {
    const response = await api.get('/products');
    return response.data;
  }
);

In the above example, we’re using the createAsyncThunk function from the @reduxjs/toolkit package to create a thunk that fetches data from an API. The first argument is the name of the thunk, and the second argument is the function that returns the promise.

Redux Toolkit

Redux Toolkit is a package that provides utilities and abstractions to simplify the process of writing Redux code. It includes a set of recommended tools and guidelines for building Redux applications.

Here’s an example of how to create a slice using Redux Toolkit:

javascript
import { createSlice } from '@reduxjs/toolkit';

const cartSlice = createSlice({
  name: 'cart',
  initialState: {
    items: []
  },
  reducers: {
    addToCart(state, action) {
      state.items.push(action.payload);
    },
    removeFromCart(state, action) {
      state.items = state.items.filter(item => item.id !== action.payload.id);
    }
  }
});

export const { addToCart, removeFromCart } = cartSlice.actions;

export default cartSlice.reducer;

In the above example, we’re using the createSlice function from the @reduxjs/toolkit package to create a slice that manages the state of the cart. The reducers property is an object that defines the actions and their corresponding reducers.

Conclusion

React Redux provides a powerful solution for managing the state of your application. By using Redux with React, you can centralize your application state, making it easier to manage and update. In this article, we’ve explored Redux and how it works with React to provide a complete solution for state management in your application. We’ve covered the basics of actions, reducers, and connecting your components to the store, as well as more advanced concepts like thunks and Redux Toolkit. With these tools, you can build scalable and maintainable React applications that can handle complex state management.

0368826868