如何使用“next-redux-wrapper"使用“Next.js"、“Redux-ToolKit"和打字稿正确吗?

问题描述

我在 Next.js 应用程序中使用 RTK (redux-toolkit).我正在尝试在getInitialProps"中发送一个 AsyncThunk Action.搜索时，我发现了一个名为next-redux-wrapper"的包.暴露商店"在getInitialProps"中，但我正在努力弄清楚如何使其适用于我的项目.

这是我目前使用带有 2 个减速器的 Typescript 的项目的准系统示例.一个 reducer 使用 AsyncThunk 从 API 获取数据.我已经安装了next-redux-wrapper"；但我不知道如何实现它，以便所有页面都可以访问商店".在getInitialProps"中.该软件包的文档有一个示例，但令人困惑.

这是我的 store.ts 的样子...

import { Action, configureStore, ThunkAction } from '@reduxjs/toolkit';导入 { createWrapper, HYDRATE } from 'next-redux-wrapper';从'../features/counter'导入{counterReducer}；从'../features/kanye'导入{ kanyeReducer }；导出常量存储 = configureStore({减速机:{计数器:counterReducer，kanyeQuote: kanyeReducer,},});导出类型 AppDispatch = typeof store.dispatch;导出类型 RootState = ReturnType;导出类型 AppThunk<ReturnType = void>= ThunkAction{如果(action.type === HYDRATE){常量下一个状态 = {...state,//使用之前的状态...action.payload,//应用 delta 从 hydration};返回下一个状态；} 别的 {返回组合减速器(状态，动作)；}};导出 const makeStore = () =>配置存储({减速器，});type Store = ReturnType;导出类型 AppDispatch = Store['dispatch'];导出类型 RootState = ReturnType;导出类型 AppThunk<ReturnType = void>= ThunkAction