CODEWITHSUNDEEP
reactjsreduxrerender
Nhân Crazy
Nhân Crazy

Reputation: 5

Redux doesn't rerender when i update Store

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

Upvotes: 0

Views: 557

Answers (1)

EnriqueDev
EnriqueDev

Reputation: 1247

In your reducer, even though you are assigning the value to a new variable, it just stores a reference to your current state, so when you make a change over that value you are actually mutating your state and redux does not notice that you actually changed it because it needs a new state. Instead do this:

let newstate = [...state];

This way you are creating a new array containing all the elements of your current state and this IS A NEW OBJECT, so your redux state will detect the change and will trigger the re-render.

Upvotes: 4

Related Questions