Quartz 🪬

Creating the Redux Slice

2 min read

Để tạo ra một slice, ta cần dùng phương thức createSlice của Redux Toolkit:

import { createSlice } from "@reduxjs/toolkit"

Đối số của hàm createSlice là một đối tượng gồm những thành phần cơ bản sau:

  • name: tên của slice.
  • initialState: state khởi tạo.
  • reducers: các reducer của từng loại action.

Ví dụ:

const counterSlice = createSlice({
  name: "counter",
  initialState: { count: 0 },
  reducers: {
    increment: (state, action) => {
      state.count += action.payload
    },
    decrement: (state, action) => {
      state.count -= action.payload
    },
  },
})

Có thể thấy, createSlice cho phép chúng ta chỉnh sửa trực tiếp trên state (mutate) trong reducers mà không làm vi phạm tính immutability. Lý do là vì Redux Toolkit sử dụng thư viện Immer (xem thêm useState).

Trong giá trị trả về của createSlice có hai thuộc tính quan trọng là:

  • actions: là một object gồm nhiều action creator. Các action creator này có tên trùng với các reducer được truyền vào createSlice.
  • reducer: là một slice reducer.

Ta export các action creator và slice reducer ra để sử dụng như sau:

export const { increment, decrement } = counterSlice.actions
 
export default counterSlice.reducer

Type of Action

Giá trị của thuộc tính type trong một action được tạo ra từ các action creator sẽ là sự kết hợp của hai thành phần:

  • domain: là tên của slice.
  • eventName: là key của reducer tương ứng.

Ví dụ, nếu ta gọi sử dụng action creator increment:

console.log(counterSlice.actions.increment(1))

Ta sẽ nhận được một action có dạng như sau:

{ type: "counter/increment", payload: 1 }

Slice Reducer

Slice reducer là một reducer được tổng hợp từ tất cả các reducer được liệt kê trong thuộc tính reducers. Reducer này biết cách để xử lý tất cả các loại action.

Giả sử nếu ta truyền vào state là { value: 10 } với action được tạo từ action creator increment:

const newState = counterSlice.reducer({ count: 10 }, counterSlice.actions.increment(1))

Thì kết quả trả về sẽ là:

console.log(newState) // { count: 11 }

Resources