React redux: Cannot set on an immutable record

React redux: Cannot set on an immutable record

I am trying to update my redux model from my reducer. The model is an extension of an Immutable Record class. I am trying to update the Record with the set method:

I am trying to update my redux model from my reducer. The model is an extension of an Immutable Record class. I am trying to update the Record with the set method:

import { List, Record } from 'immutable';
import { IFaqItem } from './api.models';

export interface IFaqsState { loading?: boolean; items?: List<IFaqItem>; } const faqsState = Record({ loading: false, items: List() });

class FaqsState extends faqsState implements IFaqsState { loading: boolean; items: List<IFaqItem>;

with(props: IFaqsState) { this.set('loading', props.loading); return this; } }

export default FaqsState;

The reducer contains the following:

case ActionTypes.FAQS_GET_AJAX_RECEIVE:
  let response: IFaqsGetResponse = action.payload.response && action.payload.response.response;
  return state.with({
    loading: false,
    items: List(response)
  });

However this gives me the following error:

Error: Cannot set on an immutable record.

UPDATE

When I change the reducer from:

let initial = new FaqsState();

const faqsReducer: Reducer<FaqsState> = (state = initial, action: AppActions) => {

to:

const faqsReducer: Reducer<FaqsState> = (state = null, action: AppActions) => {

state = new FaqsState();

it seems to work. Why is it not working when I give the initial state in as an argument?

reactjs redux

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How to implement Redux Saga with ReactJS and Redux?

In this article, I’d like to tell you more about the Redux library and create a simple ReactJS project, where I’ll set up a Redux step by step.

How to implement redux-saga with ReactJS and Redux [TUTORIAL]

In this article, we will go throug theory about state, state management tools like Redux, middleware, Redux Thunk and Redux Saga.

Should I Use Redux?

Starting a new application means drawing out a blueprint of what you want it to look like, and thinking about how you are going to implement whatever you are going to do before you even write any code. As a JavaScript developer, I often find myself questioning whether or not I’ll need to use Redux.

Redux tutorial: 03 - Setup Redux trong ReactJS với Hooks 🎉

Cùng mình khám phá các bước để setup Redux trong một ReactJS App nào ✅ Redux trong Vanilla JS App vs ReactJS App có khác gì nhau ✅ Các bước setup Redux trong Vanilla JS app ✅ Các bước setup Redux trong ReactJS app ✅ Kết nối tới Redux bằng hooks: useSelector(), useDispatch()