Hướng dẫn quản lý trạng thái trong Next.js bằng Redux Toolkit

Định cấu hình Cửa hàng Redux

Cửa hàng Redux là một thùng chứa trung tâm chứa toàn bộ trạng thái của ứng dụng. Nó đóng vai trò là nguồn dữ liệu duy nhất của ứng dụng, cung cấp trạng thái cho từng thành phần. Cửa hàng chịu trách nhiệm quản lý và cập nhật trạng thái thông qua các hành động và bộ giảm tốc—tạo điều kiện thuận lợi cho việc quản lý trạng thái trong toàn bộ ứng dụng.

Để xây dựng một cửa hàng Redux, hãy tạo một cửa hàng mới chuyển hướng trong thư mục gốc của dự án Next.js của bạn. Trong thư mục này, tạo một thư mục mới cửa hàng.js tập tin và thêm đoạn mã sau:

 import {configureStore} from '@reduxjs/toolkit';
import profileReducer from './reducers/profileSlice';
export default configureStore({
    reducer:{
        profile: profileReducer
    }
}) 

Đoạn mã trên sử dụng cửa hàng cấu hình để tạo và cấu hình cửa hàng Redux. Cấu hình cửa hàng bao gồm chỉ định bộ giảm tốc bằng cách sử dụng bộ giảm tốc sự vật.

Trong trường hợp này, bộ giảm tốc chỉ định trạng thái của ứng dụng sẽ thay đổi như thế nào để đáp ứng với các hành động cụ thể hoặc các sự kiện được chỉ định. Trong ví dụ này, các hồ sơ bộ giảm tốc chịu trách nhiệm quản lý các hành động liên quan đến trạng thái hồ sơ.

Bằng cách thiết lập cửa hàng Redux, mã sẽ thiết lập cấu trúc cốt lõi để quản lý trạng thái của ứng dụng bằng Bộ công cụ Redux.

Xác định State Slices

Redux state slice là các thành phần đóng gói logic để quản lý trạng thái của các mục dữ liệu cụ thể trong kho lưu trữ redux được định cấu hình. Những lát cắt này được tạo bằng cách sử dụng tạoSlice chức năng tự động tạo bộ giảm tốc, trình tạo hành động và loại hành động cho lát cắt.

bên trong chuyển hướng thư mục, tạo một thư mục mới và đặt tên cho nó bộ giảm tốc. Trong thư mục này, tạo hồ sơSlice.js tệp và thêm đoạn mã sau.

 import {createSlice} from '@reduxjs/toolkit';
const profileSlice = createSlice({
    name: 'profile',
    initialState: {
        name: 'none'
    },
    reducers: {
        SET_NAME: (state, action) => {
            state.name = action.payload
        }
}})
export const {SET_NAME} = profileSlice.actions;
export default profileSlice.reducer; 

Trong mã được cung cấp, tạoSlice chức năng tạo một lát cắt trạng thái cho trạng thái hồ sơ người dùng. Các hồ sơSlice đối tượng bao gồm tên của lát cắt và trạng thái ban đầuchứa các giá trị mặc định cho các thuộc tính trạng thái.

Ngoài ra, đối tượng slice cũng nhận một bộ giảm tốc thuộc tính xác định trình xử lý hành động cho lát cắt này. Trong trường hợp này, một hàm giảm tốc duy nhất có tên ĐẶT TÊN. Về cơ bản, khi bạn gọi hàm này, nó sẽ cập nhật thuộc tính name của trạng thái với dữ liệu được cung cấp.

Các tạoSlice tự động tạo các trình tạo hành động và các loại hành động dựa trên các bộ giảm tốc đã xác định. xuất khẩu ĐẶT TÊN người tạo hành động và profileSlice.reducer đại diện cho trình tạo hành động được tạo và hàm giảm tốc cho lát cắt hồ sơ.

Bằng cách tạo lát cắt trạng thái này, các thành phần trong ứng dụng có thể sử dụng ĐẶT TÊN hành động và chuyển trọng tải mong muốn để cập nhật tên hồ sơ ở trạng thái.

Tạo một thành phần để kiểm tra chức năng quản lý trạng thái của RTK

Mở index.js tập tin trong trang thư mục, xóa mã Next.js soạn sẵn và thêm mã sau.

 import styles from '@/styles/Home.module.css'
import {useRef} from 'react'
import {useSelector, useDispatch} from 'react-redux'
import {SET_NAME} from '../../redux/reducers/profileSlice'
function DisplayName(){
  const {name} = useSelector((state) => state.profile)
  return (
    <h1> I am {name} !!</h1> 
  ) }
export default function Home() {
const inputName = useRef()
const dispatch = useDispatch()
 function submitName() {
   console.log(inputName.current.value)
   dispatch(SET_NAME(inputName.current.value))
  }
  return (
    <>
      <main className={styles.main}> 
        <input placeholder='enter name' ref={inputName} />
        <button onClick={submitName}>Enter name</button>
        <DisplayName />
      </main>
    </>
  )} 

Đoạn mã trên tạo và hiển thị thành phần Next.js cho phép người dùng nhập tên và hiển thị tên được cung cấp trên trang của trình duyệt. Hiệu quả, quản lý trạng thái của ứng dụng bằng Redux Toolkit.

Các Tên hiển thị thành phần sử dụng sử dụngSelector móc để truy cập tên thuộc tính từ trạng thái hồ sơ trong cửa hàng Redux và hiển thị nó trên trang.

Để nhập tên, người dùng nhấp vào nút Nhập tên cái nút. Điều này gọi gửiTên chức năng gửi các ĐẶT TÊN hành động với giá trị đầu vào là tải trọng. Hành động này cập nhật thuộc tính tên trong trạng thái hồ sơ.

Cập nhật tệp _app.js

Cuối cùng, để định cấu hình Bộ công cụ Redux để sử dụng trong toàn bộ ứng dụng Next.js, bạn cần bao bọc ứng dụng bằng nhà cung cấp Redux—điều này đảm bảo rằng cửa hàng Redux và các trạng thái khả dụng đều có thể truy cập được đối với tất cả các thành phần trong ứng dụng.

Mở _app.js tập tin và cập nhật nó như sau:

 import {Provider} from 'react-redux'
import store from '../../redux/store'
export default function App({ Component, pageProps }) {
  return (
    <Provider store={store}>
       <Component {...pageProps} />
    </Provider> )
} 

Bây giờ, hãy tiếp tục và khởi động máy chủ phát triển để phản ánh những thay đổi bạn đã thực hiện và điều hướng đến http://localhost:3000 trong trình duyệt của bạn để kiểm tra ứng dụng.

 npm run dev 

Xử lý bù nước dữ liệu khi tải lại trang

Bù nước dữ liệu khi tải lại trang đề cập đến quá trình khôi phục và khởi tạo trạng thái của ứng dụng khi tải lại trang. Trong ứng dụng Next.js do máy chủ kết xuất, trạng thái ban đầu trước tiên được hiển thị trên máy chủ, sau đó được gửi đến máy khách.

Trên máy khách, mã JavaScript chịu trách nhiệm tái tạo lại trạng thái ứng dụng bằng cách truy xuất và giải tuần tự hóa trạng thái tuần tự hóa nhận được từ máy chủ.

Bằng cách đó, ứng dụng có thể khôi phục liền mạch dữ liệu cần thiết và duy trì phiên của người dùng. Cách tiếp cận này tránh việc tìm nạp dữ liệu không cần thiết và đảm bảo trải nghiệm người dùng không bị gián đoạn khi điều hướng giữa các trang hoặc tải lại ứng dụng.

Một trong những lợi thế của việc sử dụng Bộ công cụ Redux trong các ứng dụng Next.js là các tính năng đơn giản và thân thiện với nhà phát triển. Nó giảm đáng kể mã soạn sẵn cần thiết để xác định các hành động, bộ giảm tốc và cấu hình lưu trữ, giúp làm việc với Redux trong quản lý trạng thái dễ dàng và hiệu quả hơn.