Bắt đầu nhanh với React Redux - Tìm hiểu ngay

Cài đặt Bộ công cụ Redux và React Redux

Thêm các gói Redux Toolkit và React Redux vào dự án của bạn:

npm install @reduxjs/toolkit react-redux

Tạo một cửa hàng

Tạo một tệp có tên src/app/store.js. Nhập configureStoreAPI từ Redux Toolkit. Chúng ta sẽ bắt đầu bằng cách tạo một kho Redux trống và xuất nó:

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: {},
})

Thao tác này sẽ tạo ra một kho lưu trữ Redux và tự động cấu hình tiện ích mở rộng Redux DevTools để bạn có thể kiểm tra kho lưu trữ trong khi phát triển.

Cung cấp Redux Store cho React

Sau khi cửa hàng được tạo, chúng ta có thể cung cấp nó cho các thành phần React của mình bằng cách đặt React Redux <Provider>xung quanh ứng dụng của chúng ta vào src/index.js. Nhập cửa hàng Redux mà chúng tôi vừa tạo, đặt <Provider>xung quanh <App>, và chuyển cửa hàng làm chỗ dựa:

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App'
import store from './app/store'
import { Provider } from 'react-redux'

// As of React 18
const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
  <Provider store={store}>
    <App />
  </Provider>,
)

Tạo một lát cắt

Thêm một tệp mới có tên src/features/counter/counterSlice.js. Trong tệp đó, nhập createSliceAPI từ Bộ công cụ Redux.

Việc tạo một lát cắt yêu cầu tên chuỗi để xác định lát cắt, giá trị trạng thái ban đầu và một hoặc nhiều hàm rút gọn để xác định cách cập nhật trạng thái. Sau khi một lát được tạo, chúng ta có thể xuất các trình tạo hành động Redux đã tạo và chức năng rút gọn cho toàn bộ lát.

Redux yêu cầu chúng ta viết tất cả các cập nhật trạng thái một cách bất biến, bằng cách tạo các bản sao dữ liệu và cập nhật các bản sao . Tuy nhiên, các API createSlicevà createReducerAPI của Redux Toolkit sử dụng Immer Inside để cho phép chúng ta viết logic cập nhật "đột biến" để trở thành các bản cập nhật bất biến chính xác .

import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes.
      // Also, no return statement is required from these functions.
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
  },
})

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

Thêm Bộ giảm lát vào Cửa hàng

Tiếp theo, chúng ta cần nhập hàm reducer từ counter slice và thêm nó vào store của chúng ta. Bằng cách định nghĩa một trường bên trong tham reducersố, chúng ta yêu cầu store sử dụng hàm reducer slice này để xử lý tất cả các bản cập nhật cho trạng thái đó.

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'

export default configureStore({
  reducer: {
    counter: counterReducer,
  },
})

Sử dụng trạng thái và hành động của Redux trong các thành phần

Bây giờ chúng ta có thể sử dụng React Redux hooks để cho phép các thành phần React tương tác với kho Redux. Chúng ta có thể đọc dữ liệu từ kho bằng useSelector, và phân phối các hành động bằng useDispatch. Tạo một src/features/counter/Counter.jstệp có một <Counter>thành phần bên trong, sau đó nhập thành phần đó vào App.jsvà hiển thị bên trong <App>.

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'
import styles from './Counter.module.css'

export function Counter() {
  const count = useSelector((state) => state.counter.value)
  const dispatch = useDispatch()

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
      </div>
    </div>
  )
}

Bây giờ, bất cứ khi nào bạn nhấp vào nút "Tăng" và "Giảm":

• Hành động Redux tương ứng sẽ được gửi đến cửa hàng
• Bộ giảm lát cắt đếm sẽ thấy các hành động và cập nhật trạng thái của nó
• Thành phần này <Counter>sẽ thấy giá trị trạng thái mới từ cửa hàng và tự hiển thị lại với dữ liệu mới