Cùng nhìn sự khác nhau giữa Redux Toolkit và Redux core

Redux, với những nguyên tắc cốt lõi và sức mạnh của mình, đã trở thành một công cụ phổ biến cho việc này. Tuy nhiên, với sự ra đời của Redux Toolkit, chúng ta được chứng kiến một sự thay đổi lớn trong cách tiếp cận và triển khai. Bài viết này sẽ cùng bạn khám phá sự khác biệt giữa Redux Toolkit và Redux core, từ những chi tiết cơ bản đến những cải tiến vượt trội mà Redux Toolkit mang lại, giúp bạn hiểu rõ hơn và lựa chọn phù hợp cho dự án của mình.

Redux Toolkit là gì ?

Redux Toolkit là thư viện JS, bọc ngoài Redux core, được sinh ra để giải quyết những vấn đề của Redux core:

Nếu bạn muốn triển khai bất kỳ logic Redux nào bạn nên sử dụng Redux Toolkit.

RTK bao gồm các tiện ích giúp đơn giản hóa nhiều trường hợp sử dụng phổ biến, bao gồm store setup, creating reducers and writing immutable update logic, creating entire “slices” of state at once.

Redux là gì ?

Redux là một thư viện quản lý trạng thái bao gồm:

• Một store toàn cục
• Gửi các action là đối tượng thuần
• Reducer thuần trả về trạng thái đã cập nhật

Các thành phần bổ sung thường gồm:

• Action creators
• Middleware
• Thunk functions cho các hiệu ứng phụ
• Trạng thái đã chuẩn hóa
• Selector được ghi nhớ (Reselect)
• Redux DevTools
• Kiểu TypeScript

Bạn cũng có thể hiểu logic Redux đơn giản như sau:

Redux Core làm những gì ?

Redux là một thư viện nhỏ và không có nhiều quy tắc cứng nhắc. Nó cung cấp một số API cơ bản:

• createStore để tạo Redux store
• combineReducers để kết hợp nhiều slice reducer thành một reducer lớn
• applyMiddleware để kết hợp nhiều middleware vào store enhancer
• compose để kết hợp nhiều store enhancer thành một store enhancer

Ngoài ra, tất cả logic liên quan đến Redux trong ứng dụng của bạn phải được viết hoàn toàn bởi bạn. Điều này mang lại sự linh hoạt, nhưng không có trợ giúp nào để làm cho mã của bạn dễ viết hơn.

Ví dụ, một hàm reducer chỉ là một hàm. Trước khi có Redux Toolkit, bạn thường viết reducer bằng switch-case và cập nhật thủ công. Bạn có thể tự viết action creator và hằng số loại action kèm theo:

const initialState = { value: 0 };

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

const incrementAction = () => ({ type: 'INCREMENT' });
const decrementAction = () => ({ type: 'DECREMENT' });

Viết mã Redux thủ công đòi hỏi nhiều công sức và dễ gây lỗi:

• Cập nhật bất biến cần nhiều thao tác thủ công với object spreads và array operations, dễ dẫn đến việc vô tình làm thay đổi trạng thái.
• Mã cho một tính năng thường được trải ra nhiều file (actions, constants, reducers).
• Thiết lập store yêu cầu nhiều bước để thêm middleware và hỗ trợ Redux DevTools Extension, dù chúng là công cụ tiêu chuẩn trong hầu hết các ứng dụng Redux.

Redux Toolkit làm những gì ?

Redux Toolkit giảm bớt mã boilerplate và ngăn ngừa lỗi thường gặp bằng cách cung cấp các API đơn giản hóa các tác vụ phổ biến:

• configureStore thiết lập Redux store dễ dàng với một lệnh, kết hợp reducers, thêm middleware thunk và tích hợp Redux DevTools.
• createSlice giúp viết reducers với thư viện Immer, cho phép cập nhật bất biến bằng cú pháp JS “mutating” mà không cần spreads. Nó cũng tự động tạo action creators và các chuỗi action type.

Điều đó giúp bạn viết code đơn giản hơn nhiều

import { createSlice, configureStore } from '@reduxjs/toolkit';

const todosSlice = createSlice({
  name: 'todos',
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value += 1 },
    decrement: state => { state.value -= 1 },
  }
});

const store = configureStore({
  reducer: { todos: todosSlice.reducer }
});
//sử dụng store vs reducer
const { increment, decrement } = todosSlice.actions;

store.dispatch(increment());
store.dispatch(decrement());

Kết luận

Redux Core và Redux Toolkit khác nhau như sau:

Redux Core:

• Thiết kế cơ bản: Cung cấp các API cơ bản như createStore, combineReducers, applyMiddleware, và compose.
• Mã boilerplate: Đòi hỏi nhiều mã lặp lại và chi tiết, dễ gây lỗi.
• Cập nhật bất biến: Yêu cầu sử dụng object spreads và array operations thủ công.
• Thiết lập store: Cần nhiều bước để thêm middleware và cấu hình Redux DevTools.

Redux Toolkit:

• Mục đích: Được tạo ra để giảm bớt mã boilerplate và ngăn ngừa lỗi.
• APIs đơn giản: Cung cấp các API như configureStore và createSlice để đơn giản hóa các tác vụ thường gặp.
  • configureStore: Thiết lập Redux store dễ dàng với một lệnh, kết hợp reducers, thêm middleware thunk và tích hợp Redux DevTools.
  • createSlice: Sử dụng thư viện Immer để viết cập nhật bất biến bằng cú pháp JS “mutating”, tự động tạo action creators và chuỗi action type.
• Tính năng bổ sung: Hỗ trợ tốt hơn cho TypeScript, cung cấp thêm công cụ và chức năng để phát triển ứng dụng Redux dễ dàng hơn.

Tóm lại:

• Redux Core: Cơ bản, mạnh mẽ nhưng phức tạp và dễ gây lỗi do yêu cầu mã boilerplate.
• Redux Toolkit: Đơn giản, giảm mã boilerplate, dễ sử dụng và ngăn ngừa lỗi, thích hợp cho hầu hết các ứng dụng Redux.

Nguồn

https://redux-toolkit.js.org/introduction/why-rtk-is-redux-today#why-we-want-you-to-use-redux-toolkit