7

我正在尝试在我的 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 状态。我一无所知

4

1 回答 1

0

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

于 2021-09-03T10:26:26.100 回答