CODEWITHSUNDEEP
reactjsredux
mouchin777
mouchin777

Reputation: 1588

Redux , state.concat is not a function at rootReducer. And being forced to reRender an element for it to see the state change

So I have this sidebar component where I load my store and my dispatcher

    //select
const mapStateToProps = state => {
    return { renderedEl: state.renderedEl }
}

function mapDispatchToProps(dispatch) {
    return{
        renderLayoutElement: element => dispatch(renderLayoutElement(element))
    }
}

Then inside the same component this Is how I trigger the dispatcher

renderEl = (el) => {
    var elementName = el.target.getAttribute('id');
    var renderedElements = this.props.renderedEl; //this is data from the  store

    for (let key in renderedElements) {
        if (key == elementName) {
            renderedElements[key] = true
        }
    }

    this.props.renderLayoutElement({renderedElements});


}

Then as I understand it gets sent to the reducer

import {RENDER_LAYOUT_ELEMENT} from "../constants/action-types"

const initialState = {
    renderedEl: {
        heimdall: false,
        skadi: false,
        mercator: false
    }
}

function rootReducer(state = initialState, action){

    if(action.type === RENDER_LAYOUT_ELEMENT){
        return Object.assign({},state,{
            renderedEl: state.renderedEl.concat(action.payload)
        })
    }

    return state 
}

export default rootReducer;

This is its action

import {RENDER_LAYOUT_ELEMENT} from "../constants/action-types"

export function renderLayoutElement(payload) {
    return { type: RENDER_LAYOUT_ELEMENT, payload }
  };

Now the thing is. Im receiving a

state.renderedEl.concat is not a function at rootreducer / at dispatch

I dont understand why does that happen.

Becuase, actually the store gets updated as I can see, but the console returns that error. And I have to reload the render that uses the props of that store (with an onhover) in order to be able to see the changes. It doesnt happen automatically as it would happen with a state

Upvotes: 0

Views: 137

Answers (1)

Vlad Serdyuk
Vlad Serdyuk

Reputation: 200

if(action.type === RENDER_LAYOUT_ELEMENT){
        return { ...state, renderedEl: { ...state.renderedEl, ...action.payload } };
    }

Duplicate from comments maybe it can be helpful to someone else :)

Upvotes: 1

Related Questions