Typescript error - Assignment to property of function parameter 'state' in ReduxJS Toolkit

Question

This is my code -

type LoginState = {
  loading: 'idle' | 'pending' | 'succeeded' | 'failed';
  role: string;
  error: string;
};

const initialState: LoginState = {
  loading: 'idle',
  role: '',
  error: '',
};

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {},
  extraReducers: builder => {
    builder
      .addCase(authUser.pending, (state: LoginState) => {
        state.loading = 'pending';
      })
      .addCase(authUser.rejected, (state, action) => {
        state.loading = 'failed';
        console.log('action', action);
      });
  },
});

And I am getting this error on TS -

I am not really sure, how I can resolve this. I have already added interfaces but seems I am missing something.

Can you guys help.

Drew Reese · Accepted Answer · 2022-11-15 07:26:32Z

1

This is caused by a linting rule you have setup/configured in your project. You can either completely disable the rule (not recommended), or override the rule in the few places where it makes sense, like here in the reducer function where you are directly setting properties on the state object. Add a comment that disables the specific rule for the next line of code.

Example:

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {},
  extraReducers: builder => {
    builder
      .addCase(authUser.pending, (state: LoginState) => {
        // eslint-disable-next-line no-param-reassign
        state.loading = 'pending';
      })
      .addCase(authUser.rejected, (state, action) => {
        // eslint-disable-next-line no-param-reassign
        state.loading = 'failed';
      });
  },
});

answered Nov 15, 2022 at 7:26

Drew Reese

207k19 gold badges279 silver badges292 bronze badges

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

Comments

Rashomon · Accepted Answer · 2022-11-15 09:11:11Z

0

Dont declare the type of the state. The own library should type it correctly as WritableDraft<LoginState> (It uses the provided type at initialState):

      .addCase(authUser.pending, (state) => {
        state.loading = 'pending';
      })

edited Nov 15, 2022 at 9:11

answered Nov 15, 2022 at 9:02

Rashomon

6,8924 gold badges41 silver badges84 bronze badges

1 Comment

Nikhil Over a year ago

Thanks for the reply, but still the same error.

Collectives™ on Stack Overflow

Typescript error - Assignment to property of function parameter 'state' in ReduxJS Toolkit

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related