时间戳

首页 > 解决方案 > Redux ， state.concat 不是 rootReducer 的函数。并被迫重新渲染一个元素以查看状态变化

reactjs - Redux ， state.concat 不是 rootReducer 的函数。并被迫重新渲染一个元素以查看状态变化

问题描述

所以我有这个侧边栏组件，我在其中加载我的商店和调度程序

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

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

然后在同一个组件中，这就是我触发调度程序的方式

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});


}

然后据我了解，它被发送到减速器

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;

这是它的动作

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

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

现在的事情是。我收到一个

state.renderedEl.concat 不是 rootreducer / 调度时的函数

我不明白为什么会这样。

因为，正如我所见，实际上商店已更新，但控制台返回该错误。而且我必须重新加载使用该商店道具的渲染（带有悬停）才能看到更改。它不会像状态一样自动发生

标签： reactjsredux

解决方案

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

重复评论可能对其他人有帮助:)

推荐阅读