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?