如何实现redux-toolkit和next,js又不丢s-s-r

Posted 2023-02-19

【中文标题】如何实现redux-toolkit和next,js又不丢s-s-r

【英文标题】：How to implement redux-toolkit and next,js and not lose s-s-r

【发布时间】：2021-09-21 14:06:40

【问题描述】：

我正在尝试在我的 Next.js 项目中实现 redux-toolkit，而不会丢失我从外部 API 获取的数据的 s-s-r 选项。我遵循了 next.js GitHub 中的示例，但这样做导致在我的 redux 切片中获取数据时没有 s-s-r。我想知道如何获取数据并将该数据保存在 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 函数获取数据，它不会有 s-s-r，如果我使用 getServerSideProps，它不会保存在 redux 状态。我一无所知

【问题讨论】：

我有一个非常相似的设置，你有没有找到一个好的解决方案？

【参考方案1】：

如果您可以使用 Redux 而不是 redux-toolkit，请按照此示例进行操作 [https://github.com/vercel/next.js/blob/canary/examples/with-redux-persist]官方示例表单 Vercel/next.js。当我使用 redux 工具包为 Redux 编写 s-s-r 代码时，我也遇到了一些问题。目前这项工作正在进行中。将在可用时共享代码。姐姐