当我更新商店时 Redux 不会重新呈现

Posted 2023-02-22

【中文标题】当我更新商店时 Redux 不会重新呈现

【英文标题】：Redux doesn't rerender when i update Store

【发布时间】：2018-04-09 06:43:16

【问题描述】：

我更新了商店，它登录了我的控制台，但组件的内容没有改变。 我在我的渲染函数中渲染问题并且 这是我的减速机。我更新了问题[0]，但没有任何改变。

function VideoData(state=data, action)
switch(action.type)
    case SHOW_QUESTION:
        let newstate = state;
        newstate.currentQuestion = action.item.currentQuestion;
        newstate.currentTime = action.item.currentTime;
        newstate.question[0] = Q:"laksndlaksnd";
        return newstate;
    default:
        return state;


const rootReducer = combineReducers(VideoData);

export default rootReducer;

渲染函数

render()
    return(
        <div className="Learning">
            <div className="CategoryMenu">
                <ContentList/>
            </div>
            <div className="ActivitiesContent">
                <div id="video_wraper">
                  <YouTube
                videoId=this.props.VideoData.video
                opts=opts
                onPlay = this.handlePlay.bind(this)
              />
                </div>
                <div className="Q&Aarea">
                    <div className="">this.props.VideoData.question[0].Q</div>

//I log data of store here but nothing change when i update Store 

                    <ABCDQUestion data=this.props.VideoData.question[0] continue=this.handlePlay.bind(this)/>
                </div>
            </div>
        </div>
    )       



function mapStateToProps(state)
    return VideoData:state.VideoData

function mapDispatchToProps(dispatch)
    return bindActionCreators(ShowQuestion,dispatch);


export default connect(mapStateToProps,mapDispatchToProps)(Learning);

【参考方案1】：

在您的 reducer 中，即使您将值分配给一个新变量，它也只是存储对您当前状态的引用，因此当您对该值进行更改时，您实际上是在改变您的状态，而 redux 不会注意到你实际上改变了它，因为它需要一个新的状态。而是这样做：

let newstate = [...state];

这样，您将创建一个包含当前状态的所有元素的新数组，这是一个新对象，因此您的 redux 状态将检测到更改并触发重新渲染。