Khái niệm

Redux là một thư viện quản lý trạng thái (state) cho các ứng dụng JavaScript. Nó giúp bạn quản lý trạng thái ứng dụng một cách dễ dàng và hiệu quả.

Redux bao gồm các đối tượng cần biết sau đây:

• Store là nơi lưu trữ toàn bộ trạng thái của ứng dụng. Trạng thái trong Redux được coi là “read-only” và chỉ có thể được cập nhật thông qua các action.
• action là một đối tượng JavaScript chứa thông tin về sự thay đổi trạng thái. Mỗi action phải có một thuộc tính “type” để xác định loại action. Các action cũng có thể chứa các dữ liệu khác như payload.
• reducer là một hàm JavaScript nhận vào trạng thái hiện tại và một action, và trả về trạng thái mới. Reducer xác định cách thức xử lý action và cập nhật trạng thái của ứng dụng.
• dispatch là một phương thức trong store, được sử dụng để gửi action tới reducer để cập nhật trạng thái. Dispatch nhận vào một action và gửi nó tới reducer phù hợp.

Redux sử dụng mô hình kiến trúc Flux, trong đó trạng thái của ứng dụng được lưu trữ trong một cấu trúc duy nhất gọi là store. Mọi thay đổi vào trạng thái phải thông qua dispatch để thực thi action, và các reducer được sử dụng để xử lý các action và cập nhật trạng thái.

Ví dụ

Dưới đây là một ví dụ đơn giản về cách sử dụng Redux trong ứng dụng React.

Cài đặt Redux và React Redux:

npm install redux react-redux

Tạo file actions.js để định nghĩa các action:

// actions.js
export const increment = () => {
  return {
    type: 'INCREMENT',
  };
};

export const decrement = () => {
  return {
    type: 'DECREMENT',
  };
};

Tạo file reducers.js để xử lý các action và cập nhật trạng thái:

// reducers.js
const initialState = {
  count: 0,
};

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

export default counterReducer;

Tạo file store.js để tạo store và kết nối với ứng dụng React:

// store.js
import { createStore } from 'redux';
import counterReducer from './reducers';

const store = createStore(counterReducer);

export default store;

Sử dụng Redux trong ứng dụng React:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

function App() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default App;

Trong ví dụ trên, chúng ta sử dụng hook useSelector để lấy trạng thái từ store và hook useDispatch để gửi action tới reducer. Khi người dùng nhấp vào nút “Increment” hoặc “Decrement”, action tương ứng sẽ được gửi tới reducer và trạng thái sẽ được cập nhật.