reactjs 访问getInitialProps中的存储,redux在nextjs中持久化

mwecs4sa  于 2023-04-05  发布在  React
关注(0)|答案(2)|浏览(149)

我在这里使用nextjs示例:https://github.com/vercel/next.js/tree/canary/examples/with-redux-persist。我修改了pages/index.js如下:

const Index = () => {
  const counter = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>
        Count: <span>{counter}</span>
      </h1>
      <button onClick={() => dispatch(incrementCount())}>+1</button>
      <button onClick={() => dispatch(decrementCount())}>-1</button>
      <button onClick={() => dispatch(resetCount())}>Reset</button>
    </div>
  );
};

Index.getInitialProps = (ctx) => {
  const store = initializeStore();
  store.dispatch(incrementCount());
  store.dispatch(incrementCount());
  console.log(Object.keys(ctx));
  console.log("store", store.getState());
  return {};
};

export default Index;

从log语句的输出[count is printed as 2]中,我可以看到在getInitialProps中的两次调度调用之后(当页面刷新时),store被更新了。然而,counter变量中的Count: <span>{counter}</span>行中的store没有更新,它仍然显示0。如果使用按钮来递增,它可以很好地与redux persist一起工作。
所以我的问题是,我如何访问存储并从getInitialProps更新状态?让我们假设计数器的值为5,当页面刷新时,因为我使用了redux persist,它仍然会有值5。但是如果我在getInitialProps中调度一个动作,页面被刷新,它不应该调用getInitialProps并将计数器值更新为6吗?
编辑:['err', 'req', 'res', 'pathname', 'query', 'asPath', 'AppTree']这是我在getInitialProps中执行console.log(Object.keys(ctx));时得到的输出

yhxst69z

yhxst69z1#

不要在getInitialProps内部初始化存储。要访问存储,您可以简单地检查:

static async getInitialProps(context) {
    console.log(context.ctx); // one of the property is 'store'
    return {};
  }
vyu0f0g1

vyu0f0g12#

客户端的redux persisting持久存储,我认为它在服务器上是不可访问的-或者你必须使用一些redux persisting cookie并在cookie中获取数据。

相关问题