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

[Andrey Briginets]

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

[Jiang]

give us a reproduction link describe for this issue

[OchreFox]

I quickly recreated the issue by cloning the demo-redux-toolkit into a sandbox, and changing the syntax to the builder callback notation: https://codesandbox.io/s/late-sunset-4emjzl?file=/store.tsx

[sacru2red]

I have same Issue

[Mayowa Daniel]

same

[Mateusz Szczęch]

+1 same

[Frank Eijking]

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.

[Asad Dhorajiwala]

Maybe we should change the docs to use the builder callback notation?

[Kirill Konshin]

Thanks @karaoak

@AnimeAllstar feel free to submit PR with improved docs.