如何实现 redux-toolkit 和 next,js 而不丢失 SSR

问题描述

我正在尝试在我的 Next.js 项目中实现 redux-toolkit，而不会丢失我从外部 API 获取的数据的 SSR 选项。我遵循了 next.js GitHub 中的示例，但这样做导致在我的 redux 切片中获取数据时没有 SSR。我想知道如何获取数据并将该数据保存在 Redux 状态中。这是我写的： 这是 store.js 文件

export const store = configureStore({
  reducer: {
    users: usersReducer,},});

_app.js 文件

import { Provider } from 'react-redux';
import { store } from '../app/store';

const MyApp = ({ Component,pageProps }) => {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
};

export default MyApp;

useRSSlice.js 文件

import { createSlice,createAsyncThunk } from '@reduxjs/toolkit';

const initialState = {
  items: null,status: 'idle',error: null,};

export const fetchUsers = createAsyncThunk('users/fetchUsers',async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  const users = await res.json();

  return users;
});

const useRSSlice = createSlice({
  name: 'categories',initialState,reducers: {},extraReducers: {
    [fetchUsers.pending]: (state,action) => {
      state.status = 'loading';
    },[fetchUsers.fulfilled]: (state,action) => {
      state.status = 'succeeded';
      state.items = action.payload;
    },[fetchUsers.rejected]: (state,action) => {
      state.status = 'Failed';
      state.error = action.error.message;
    },});

export default useRSSlice.reducer;

最后是我从中获取数据的页面：

export default function Home() {
  const dispatch = usedispatch();
  const users = useSelector((state) => state.users.items);
  useEffect(() => {
    dispatch(fetchUsers());
  },[dispatch]);

  return (
    <div>
      <h1>users</h1>
      {users &&
        users.length &&
        users.map((user) => <p key={user.id}>{user.name}</p>)}
    </div>
  );
}

如果我通过调度 fetchUsers 函数来获取数据，它不会有 SSR，如果我使用 getServerSideProps，它不会以 redux 状态保存。我没脑子

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）