Почему action.payload is undefined?

Question

[Александр Иванов]

прохожу видео курс из ютуба(осваиваю reactjs). Столкнулся с ошибкой которую не получается исправить, при отправке формы выдается ошибка

action.payload is undefined
auth/registerUser/fulfilled@http://localhost:3000/static/js/bundle.js:1218:7

в консоле следующее

The object notation for `createSlice.extraReducers` is deprecated, and will be removed in RTK 2.0. Please use the 'builder callback' notation instead: https://redux-toolkit.js.org/api/createSlice

Uncaught (in promise) TypeError: action.payload is undefined

код из файла authSlice

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import axios from "../../../utils/axios";

const initialState = {
    user: null,
    token: null,
    isLoading: false,
    status: null
}

export const registerUser = createAsyncThunk(
    'auth/registerUser',
    async ({username, password}) => {
        try {
            const {data} = await axios.post('/auth/register', {username, password})

            if(data.token) {
                window.localStorage.setItem('token', data.token)
            }
            return data
        } catch (err) {
            console.log(err)
        }
    }
)
export const authSlice = createSlice ({
    name: 'auth',
    initialState,
    reducers: {},
    extraReducers: {
        [registerUser.pending]: (state) => {
            state.isLoading = true
            state.status = null
        },
        [registerUser.fulfilled]: (state, action) => {
            state.isLoading = false
            state.status = action.payload.message // ругается на эту строчку
            state.user = action.payload.newUser
            state.token = action.payload.token
        },
        [registerUser.rejected]: (state, action) => {
            state.status = action.payload.message
            state.isLoading = false
        }
    }
})

export default authSlice.reducer

от бекэнда ответ приходит корректный, но судя по консоли то даже запроса на бекэнд нет
файл регистрации

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { toast } from 'react-toastify'

import { Link } from 'react-router-dom'
import { registerUser } from '../redux/features/auth/authSlice'

const RegisterPage = () => {
  const [username, setUsername] = React.useState('')
  const [password, setPassword] = React.useState('')
  
  const dispatch = useDispatch()
  
  //вытаскиваем статус из store -> authSlice
  const {status} = useSelector((state) => state.auth)
  React.useEffect(() => {
    if(status) toast(status)
  }, [status])

  const handleSubmit = () => {
    try {
      dispatch(registerUser({username, password}))
      setPassword('')
      setUsername('')
    } catch (err) {
      console.log(err)
    }
  }

  return (
    <form onSubmit={e => e.preventDefault()} className='w-1/4 h-60 mx-auto mt-40'>
      <h2 className='text-lg text-black text-center'>Login</h2>
      <label className='text-xs text-gray-400'>
          Username:
          <input
              type='text'
              value={username}
              onChange={e => setUsername(e.target.value)}
              placeholder='Username'
              className='mt-1 text-black w-full rounded-lg bg-gray-400 border py-1 px-2 text-xs outline-none placeholder:text-gray-700' />
      </label>

      <label className='text-xs text-gray-400'>
          Password:
          <input
              type='password'
              value={password}
              onChange={e => setPassword(e.target.value)}
              placeholder='Password'
              className='mt-1 text-black w-full rounded-lg bg-gray-400 border py-1 px-2 text-xs outline-none placeholder:text-gray-700' />
      </label>

      <div className='flex gap-8 justify-center mt-4'>
          <button
              type='submit'
              onClick={handleSubmit}
              className='flex justify-center items-center text-xs bg-gray-600 text-white rounded-sm py-2 px-4'>
              Registration
          </button>
      </div>
    </form>
  )
}

export default RegisterPage

когда отправляю json на бекэнд, на адрес /auth/register через postman ответ приходит корректный: сообщение данные юзера и токен, однако при выполнении запроса за фронтэнде в ответ ошибка

Answer 1

[programTop]

Нужно переписать extraReducers под новый формат:
extraReducers: (builder) => {
builder
.addCase(registerUser.pending, (state) => {
state.isLoading = true;
state.status = null;
})
.addCase(registerUser.fulfilled, (state, action) => {
state.isLoading = false;
state.status = action.payload.message;
state.user = action.payload.newUser;
state.token = action.payload.token;
})
.addCase(registerUser.rejected, (state, action) => {
state.isLoading = false;
state.status = action.payload.message;
});
},

Типо так )