Using React Redux Toolkit with Typescript - set state for reducer

Question

I'm trying to use React Redux Toolkit with TypeScript and I'm facing this issue with the creation of the reducer for the User model.

This is my userReducer.ts file:

import { createReducer } from "@reduxjs/toolkit";
import { UserModel } from "../../models/UserModel";
import {setUser, getUser, removeUser} from "../actions/userActions";

const initialState: UserModel = {
  email: "",
  id: "",
}

export const userReducer = createReducer(initialState, (builder) =>
  builder
    .addCase(getUser, (state) => state)
    .addCase(removeUser, () => initialState)
    .addCase(setUser, (state, action) => { ...state, ...action.payload })
);

I'm having issues with the last addCase for setting the user, intellisense says:

A spread argument must either have a tuple type or be passed to a rest parameter.ts(2556)
Cannot find name 'state'.ts(2304)

I don't understand how to fix it and more in general how to set the state properly using Redux with Typescript.

Krystyna Solawa · Accepted Answer · 2022-05-26 10:16:39Z

2

I suppose you want to return state updated with action.payload?:

 .addCase(setUser, (state, action) => ({ ...state, ...action.payload }))

edited May 26, 2022 at 10:16

answered May 26, 2022 at 10:10

Krystyna Solawa

864 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using React Redux Toolkit with Typescript - set state for reducer

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related