如何在next.js中配置redux-toolkit1. 创建一个名为 redux 或 store 或 redux 的文

1. 创建一个名为 redux 或 store 或 redux 的文件夹。

2. 创建名为 store.ts 的文件。

import { configureStore } from '@reduxjs/toolkit'  
  
![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/07a0c3984d8240e5bb4b014083231202~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=243&h=86&s=3627&e=png&b=181818)
export const store = configureStore({  
reducer: {},  
})  
  
// 从store本身推断出' RootState '和' AppDispatch '类型 
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

此代码创建一个 Redux 存储，并自动配置 Redux DevTools 扩展。

3. 为（useDispatch， useSelector）配置类型化挂钩

import { useDispatch, useSelector } from 'react-redux';  
import type { TypedUseSelectorHook } from 'react-redux';  
import { AppDispatch, RootState } from './store';  
  
// Use throughout your app instead of plain `useDispatch` and `useSelector`  
export const useAppDispatch: () => AppDispatch = useDispatch;  
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

当你需要在组件中使用 useSelector、useDispatch 时，定义类型化钩子会有好处

5. 配置特征模块

一个应用程序或同一功能中可以有多个功能

import { PayloadAction, createSlice } from "@reduxjs/toolkit";

interface User {
  user: string;
}

const initialState: User = {
  user: "1231232",
};

const slice = createSlice({
  name: "User",
  initialState,
  reducers: {
    setUserInfo: (state: User, action: PayloadAction<string>) => {
      state.user = action.payload;
    },
  },
});

export default slice.reducer;

6. 将模块与toolkit连接起来

7. 配置自定义提供程序

这是一个至关重要的步骤，以便将Next.js应用程序包装为store，以便组件访问存储根布局需要用自定义提供程序包装，该提供程序可以将存储传递给所有子组件。

'use client';
  
import { Provider } from 'react-redux';  
import { store } from './store';  
  
export function Providers({ children }: { children: React.ReactNode }) {  
return <Provider store={store}>{children}</Provider>;  
}  
  
export default Providers;

“use client”是非常重要的添加，让NextJS知道这个功能组件将被视为客户端组件而不是服务器组件。否则，如果您使用 RootLayout 组件配置了自定义提供程序，它将引发运行时异常

8.到这里你的文件配置应该有如下这些

9.使用自定义提供程序包装 RootLayout 文件

通过用自定义提供程序包装根布局文件，layout.jsx 的子级将有权访问 Redux 存储。因此，一旦配置好了，客户端组件就可以使用类型化钩子文件中定义的钩子访问存储。


import { Inter } from 'next/font/google'
import "./globals.css";
import React from 'react';
import Providers from '@/store/Provider';

// layout.tsx After You configure Provider
const inter = Inter({ subsets: ['latin'] })
const RootLayout = ({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) => {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Providers>
          <main>{children}</main>
        </Providers>
      </body>
    </html>
  );
}
export default React.memo(RootLayout)

10.如何使用

11.如何使用

完结，撒花~

如何在next.js中配置redux-toolkit