Redux 和 NextJS 13

Question

我正在尝试使用 next 和 redux 第 13 版构建 NextJs 应用程序。 我找到了在应用程序中传递 redux 提供程序的方法，但我仍然不明白接下来的事情： 如何使用“createAsyncThunk”操作或 RTK 查询与“getStaticProps”以及另一个 next 函数来获取 nextJS 13 和应用程序文件夹中的数据？

Answer 1

使用 NEXTJS 页面路由器

可以使用，运行

npm i next-redux-wrapper next-redux-cookie-wrapper

next-redux-wrapper 将包装您的应用程序，并使您的 redux 存储在客户端和服务器端都可用。

因此，当您使用

getStaticProps

或

getServerSideProps

时，您还可以访问您的 redux 存储。检查他们的文档这里

对于 next-redux-cookie-wrapper，如果您想在浏览器刷新时保留任何 redux 存储值（例如 userToken），此软件包将有所帮助。检查他们的文档这里

使用 NEXTJS 应用程序路由器

可能适用我在页面路由器答案中提到的相同技术，因此您可能需要调查自己

Answer 2

createAsyncThunk 用于异步调用，您可以从下一个 js 组件中调度，就像调度一个动作一样。

export async function getServerSideProps (context) {
      const rooms = await store.dispatch(getAlldata ()).unwrap();
      return { props: { rooms } }
    }

//AsyncThunk

export const getAlldata = createAsyncThunk('rooms/fetchData', async 
      (payload, thunkAPI) => {
  try {
    .......
  } catch (err) {
    return err
  }
})