Access store in getInitialProps with redux persist in nextjs

user_2532763 0
Viewed 2823

I am using the nextjs example from here: https://github.com/vercel/next.js/tree/canary/examples/with-redux-persist. And I modified the pages/index.js as follows:

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;

I can see that the store was updated after the two dispatch calls within getInitialProps(when the page is refreshed) from the output from the log statement[count is printed as 2]. However, the store is not updated in the counter variable on the line Count: <span>{counter}</span> and it still shows 0. And if the buttons are used to increment it works fine with redux persist.

So my question is, how do I access the store and update the state from getInitialProps?. Lets say counter has the value of 5 at the moment and when the page is refreshed, because I am using redux persist, it will still have the value of 5. But if I was to dispatch an action in getInitialProps and the page was refreshed, shouldnt it call getInitialProps and update the counter value to 6?

EDIT: ['err', 'req', 'res', 'pathname', 'query', 'asPath', 'AppTree'] This is the output I get when I do console.log(Object.keys(ctx)); inside getInitialProps

redux next.js reactjs javascript
1 Answers

Don't initialize the store inside getInitialProps. To access the store, you can simply check:

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