reactjs - Redux doesn't rerender when i update Store

Question

I update Store and it logged on my console but the content of component doesn't change. I render Question in my render function and here is my reducers. I update the question[0] but nothing change.

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 function

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

Answer 1

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

let newstate = [...state];

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