如何在 Next.js 中使用 redux 获取数据

Question

所以之前我迁移了我的代码以在我的 Next.js 项目中使用 Redux。 尽管它使扩展变得更容易，但我仍然存在一些问题。

基本上我在以前的版本中是从getServerSideProps服务器获取数据的。 但是当我考虑从 redux 操作中获取时，它变得更加复杂。

顺便说一句，我正在使用 redux-thunk。

这是我的代码：

动作.js

export const FetchPosts = () => async (dispatch: Dispatch) => {
    const { data } = await api.fetchPosts();
    dispatch({ type: FETCH_ALL, payload: data });
}

减速器.js

export default (state: any = [], action: AnyAction) => {
    switch (action.type) {
        case FETCH_ALL:
            return [...state, action.payload.data]
        default:
            return state;
    }
}

组件.tsx

const Component:FC = () => {
    
    const dispatch = useDispatch();
    const posts = useSelector(state => state.posts);

    useEffect(() => {
      // Should i fetch in here?
      dispatch(getPosts());
    }, []);

    return (
        <div>
          {/* ... */}
        </div>
    );
}

export async function getServerSideProps() { 

  // Should i even fetch here?

  return {
    props: { posts }
  }
}

任何人都可以帮忙吗？

Answer 1

如果您获取的数据对于 SEO 目的很重要，您应该在getServerSideProps中获取数据。 因此，当服务器将 HTML 发送到客户端时，您的 html 将填充数据（假设您有一个电子商务商店并且您想要索引您的购物项目）。 但是要使用服务器端 redux，您应该实现next-redux-wrapper

如果数据对 SEO 不重要，例如管理员需要查看用户数据，您可以在客户端获取数据。