Property 'payload' does not exist on type 'Action<"__NEXT_REDUX_WRAPPER_HYDRATE__">' with latest Redux-Toolkit 1.9.0

Describe the bug

RTK team redesigned extraReducers a bit and current approach is going to be deprecated when RTK 2.0 releases. So current implementation

extraReducers: {
    [HYDRATE]: (state, action) => {
      // ...
    },
  },

should be changed to:

extraReducers: (builder) => {
    builder.addCase(HYDRATE, (state, action) => {
      // ...
    }),
  },

But currently going that way is not possible due to the following error:

Property ‘payload’ does not exist on type ‘Action<“NEXT_REDUX_WRAPPER_HYDRATE”>’

Apparently there is no payload on action variable, only type is present.

To Reproduce

Steps to reproduce the behavior:

1. Follow migration guide for RTK 1.9.0

Screenshots

[karaoak]

This is not a next-redux-wrapper issue.

As per RTK documentation (as linked to in the deprecation warning): https://redux-toolkit.js.org/api/createSlice#the-extrareducers-builder-callback-notation

You should use the the builder callback notation.

This means you should first create a typed action with the HYDRATE string const. In this way you are forced to type the payload of your action.

See below example for what your updated code should look like:

import { createSlice, createAction, PayloadAction } from '@reduxjs/toolkit';
import { AppState } from "@webapp/store";
import { HYDRATE } from '@webapp/store/next-redux-wrapper';

const hydrate = createAction<AppState>(HYDRATE);

// and then inside your createSlice options, add:

 extraReducers: (builder) => {
        builder.addCase(hydrate, (state, action) => {

You can also create an action to be shared among slices, like this:

export const APP_HYDRATE = createAction<AppState>(HYDRATE);

and instead import that into your slices.

[phatify]

give us a reproduction link describe for this issue