当我更新商店时,Redux 不会重新呈现
Redux doesn't rerender when i update Store
我更新了 Store 并且它登录到我的控制台,但组件的内容没有改变。
我在我的渲染函数中渲染问题并且
这是我的减速器。我更新了问题[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);
在您的 reducer 中,即使您将值分配给一个新变量,它也只是存储对您当前状态的引用,因此当您对该值进行更改时,您实际上是在改变您的状态,而 redux 不会请注意,您实际上更改了它,因为它需要一个新状态。而是这样做:
let newstate = [...state];
通过这种方式,您将创建一个包含当前状态的所有元素的新数组,这是一个新对象,因此您的 redux 状态将检测到更改并触发重新渲染。
我更新了 Store 并且它登录到我的控制台,但组件的内容没有改变。 我在我的渲染函数中渲染问题并且 这是我的减速器。我更新了问题[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);
在您的 reducer 中,即使您将值分配给一个新变量,它也只是存储对您当前状态的引用,因此当您对该值进行更改时,您实际上是在改变您的状态,而 redux 不会请注意,您实际上更改了它,因为它需要一个新状态。而是这样做:
let newstate = [...state];
通过这种方式,您将创建一个包含当前状态的所有元素的新数组,这是一个新对象,因此您的 redux 状态将检测到更改并触发重新渲染。