Hiểu về Redux Store, Actions và Reducers trong React

Trong một ứng dụng sử dụng Redux, kiến trúc xoay quanh ba khái niệm chính: Redux store, actions và reducers. Hãy đi sâu vào từng khái niệm này và xem chúng làm việc cùng nhau như thế nào.

Redux Store

Redux store là một nguồn thông tin duy nhất chứa toàn bộ trạng thái của ứng dụng. Đây về cơ bản là một đối tượng JavaScript chứa dữ liệu đại diện cho toàn bộ trạng thái ứng dụng. Bạn tạo store bằng cách sử dụng hàm createStore từ thư viện Redux.

Actions

Actions là các đối tượng JavaScript thuần túy mô tả điều gì đó đã xảy ra trong ứng dụng. Chúng mang một trường type chỉ định loại hành động đang được thực hiện, và dữ liệu bổ sung có thể được bao gồm. Actions được tạo bằng các action creator, đó là các hàm trả về đối tượng action. Ví dụ:

// Các loại Action
const ADD_TODO = 'ADD_TODO';

// Action Creator
const addTodo = (text) => {
  return {
    type: ADD_TODO,
    payload: text
  };
};

Reducers

Reducers chỉ định cách trạng thái của ứng dụng thay đổi khi có hành động xảy ra. Một reducer là một hàm tinh khiết nhận trạng thái hiện tại và một action làm tham số và trả về một trạng thái mới. Reducers được kết hợp thành một reducer gốc duy nhất bằng cách sử dụng hàm combineReducers. Dưới đây là ví dụ đơn giản:

// Reducer
const todosReducer = (state = [], action) => {
  switch (action.type) {
    case ADD_TODO:
      return [...state, action.payload];
    default:
      return state;
  }
};

// Kết hợp các Reducers
const rootReducer = combineReducers({
  todos: todosReducer,
  // ...các reducer khác
});

Làm việc cùng nhau

Khi bạn gửi đi một action bằng cách sử dụng hàm dispatch, Redux chuyển action đó tới tất cả các reducers. Mỗi reducer kiểm tra xem loại của action có khớp với loại của nó hay không, và cập nhật phần liên quan của trạng thái tương ứng. Trạng thái đã cập nhật sau đó được lưu trữ trong Redux store, và bất kỳ thành phần nào kết nối với trạng thái đó sẽ được tự động kích hoạt lại.

Ví dụ cụ thể

Hãy tưởng tượng một ứng dụng danh sách công việc. Khi người dùng thêm công việc mới, một action được gửi đi với loại ADD_TODO và văn bản của công việc như payload. Reducer của danh sách công việc nhận action này, thêm công việc mới vào trạng thái và trả về trạng thái mới.

Kết luận

Hiểu cách Redux store, actions và reducers tương tác là quan trọng để quản lý trạng thái hiệu quả. Kiến trúc này đảm bảo sự tách biệt rõ ràng giữa các phần và giúp bạn quản lý trạng thái ứng dụng phức tạp một cách dễ dàng. Khi bạn tiếp tục phát triển với Redux, những khái niệm này sẽ tạo nền tảng cho chiến lược quản lý trạng thái của bạn.