Redux Toolkit là gì?

Redux là công cụ quản lý state phổ biến trong hệ sinh thái React. Tuy nhiên, việc sử dụng Redux truyền thống thường bị phàn nàn là dài dòng và khó sử dụng vì cần nhiều bước để tạo store, tạo nhiều file với code lặp lại, và không có quy chuẩn rõ ràng cho việc viết logic. Redux Toolkit ra đời nhằm giải quyết những vấn đề này. Được phát triển bởi chính đội ngũ ReduxJS, Redux Toolkit giúp viết code Redux nhanh chóng, hoàn chỉnh và theo quy chuẩn thống nhất.

Redux Toolkit không chỉ đơn giản hóa việc tạo store mà còn tích hợp sẵn một số middleware và Redux Devtool để debug và theo dõi quá trình cập nhật state. Điều này giúp tiết kiệm thời gian và công sức cho lập trình viên.

Việc khai báo action type trong Redux truyền thống khá dài dòng và giá trị này chỉ được sử dụng khi tạo action và trong reducer. Redux Toolkit cung cấp hàm createAction để tạo action một cách ngắn gọn hơn. Hàm này nhận vào một string và trả về một hàm khởi tạo action với type là giá trị string được truyền vào.

import { createAction } from '@reduxjs/toolkit';
const increment = createAction('INCREMENT');
console.log(increment()); // {type: "INCREMENT"}

Hơn nữa, createAction cho phép truy xuất type của action một cách dễ dàng, giúp tiết kiệm thêm code:

console.log(increment.toString()); // "INCREMENT"
console.log(increment.type); // "INCREMENT"

Redux Toolkit cũng cung cấp hàm createReducer để tạo reducer một cách đơn giản và trực quan hơn so với cách viết truyền thống. createReducer cho phép khởi tạo reducer với logic trực quan như một object tham chiếu, với mỗi key là một type và value là một reducer function.

import { createReducer } from '@reduxjs/toolkit'
const increment = createAction('INCREMENT')
const decrement = createAction('DECREMENT')

const initialState = {
  count: 0
}

const counterReducer = createReducer(initialState, {
  [increment]: (state) => ({ count: state.count + 1 }),
  [decrement]: (state) => ({ count: state.count - 1 })
})

createReducer nhận vào hai tham số: giá trị ban đầu của state và object giúp reducer lắng nghe và cập nhật state. Dựa vào tính chất computed property của ES6, ta có thể viết lại code trên ngắn gọn hơn:

const counterReducer = createReducer(initialState, {
  [increment]: (state) => ({ count: state.count + 1 }),
  [decrement]: (state ) => ({ count: state.count - 1 })
})

Nhờ createAction và createReducer, việc tạo store trong Redux Toolkit trở nên đơn giản và dễ hiểu hơn rất nhiều so với Redux truyền thống. Code được tổ chức rõ ràng, dễ đọc và dễ bảo trì. Redux Toolkit giúp đơn giản hóa việc quản lý state trong ứng dụng React, giúp lập trình viên tập trung vào logic nghiệp vụ hơn là boilerplate code.

// store.js
import { configureStore, createAction, createReducer } from '@reduxjs/toolkit';

// actions
const increment = createAction('increment')
const decrement = createAction('decrement')

const initialState = {
  count: 0
}

const rootReducer = createReducer(initialState, {
  [increment]: (state) => ({count: state.count + 1}),
  [decrement]: (state) =>  ({count: state.count - 1})
})


const store = configureStore({
  reducer: rootReducer
})

export default store