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）。但是，存储在counter行的Count: <span>{counter}</span>变量中没有更新，它仍然显示0。而且，如果使用按钮来增加它，则可以与redux一起使用。

所以我的问题是，如何访问商店并通过getInitialProps更新状态？可以说counter目前具有5的值，并且当刷新页面时，由于我使用的是reduxpersist，它的值仍然为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 {};
  }

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

1 个答案: