使用 redux 访问 getInitialProps 中的存储在 nextjs 中持续存在

Question

我正在使用此处的 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;

我可以看到，在 getInitialProps 中的两次调度调用（刷新页面时）从日志语句的输出[计数打印为 2] 中更新了存储。但是，Count: <span>{counter}</span> 行上的 counter 变量中的存储没有更新，它仍然显示0。如果按钮用于递增，则它可以与 redux persist 一起正常工作。

所以我的问题是，我如何访问商店并从 getInitialProps 更新状态？假设 counter 目前的值为 5，当页面刷新时，因为我使用 redux persist，它的值仍然是 5。但是如果我要在 getInitialProps 中调度一个动作并且页面被刷新，它不应该调用 getInitialProps 并将计数器值更新为 6 吗？

编辑：['err', 'req', 'res', 'pathname', 'query', 'asPath', 'AppTree'] 这是我在 getInitialProps 中执行console.log(Object.keys(ctx)); 时得到的输出

Answer 1

不要在getInitialProps 中初始化存储。要访问商店，您只需检查：

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