React + Redux Toolkit is not able to push nested objects to an array

Viewed 34

React + Redux Toolkit is not able to push nested objects to an array.

getting paused before potential out-of-memory crash

flow.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  flowMessage: [],
};

export const flowSlice = createSlice({
  name: "flow",
  initialState,
  reducers: {
    setFlowMessage: (state, action) => {
      state.flowMessage.push(action.payload.messages);
    },
  },
});

export const { setFlowMessage } = flowSlice.actions;

export default flowSlice.reducer;

store.js

import { configureStore } from '@reduxjs/toolkit'
import flowReducer from "./actions";
export const store = configureStore({
  reducer: {
    flow: flowReducer,
  },
});

When I am pushing data to props from react component and response is nested objects.

Resonse object look like this:

{
  "id": "1661751452644",
  "type": "input",
  "data": {
    "label": "vinay kummar"
  },
  "children": [
    {
      "id": "1661885522666",
      "type": "card",
      "data": {
        "name": "vinay",
        "text": "Card Body Card Body Card Body",
        "label": "default",
        "links": [
          {}
        ],
        "title": "Card Title",
        "header": "This is header"
      },
      "children": [
        {
          "id": "1661885522666",
          "type": "card",
          "data": {
            "name": "vinay",
            "text": "Card Body Card Body Card Body",
            "label": "default",
            "links": [
              {}
            ],
            "title": "Card Title",
            "header": "This is header"
          },
          "children": []
        },
        {
          "id": "1662223395515",
          "type": "image",
          "data": {
            "text": "No",
            "label": "",
            "links": [],
            "title": "",
            "header": "",
            "images": []
          },
          "children": []
        },
        {
          "id": "1662276221551",
          "type": "useraction",
          "data": {
            "text": "Input",
            "label": "",
            "links": [],
            "title": "",
            "header": "",
            "images": [],
            "node_type": "",
            "user_input": "user_name"
          },
          "children": []
        }
      ]
    }
  ]
}

Component code..

componentDidMount() {
    this.props.dispatch(setFlowMessage({ messages: response }));
  }

Can you guys please help me out where I am making mistake?

0 Answers
Related