我想实现的是一个组件能改变另一个组件button上面的text的功能,查阅了很多资料,决定用redux来实现,因为两个组件并不是父子组件的关系,套用起来会很麻烦。
看网上很多人页面渲染不成功是直接在reducer里修改了state的值,从而导致页面未重新渲染,我尝试使用...object后,页面还是没有重新渲染。
正确修改后的reducer:
const button_text_reducer=(state,action)=>{
switch(action.type){
case "change_button_text":
return {...{store_button1_text:"Log Out"}}
default:
return state
}
}
export default button_text_reducer;
我意识到,可能是在把store的值渲染到页面这里写错了,研究后,发现果然是这样。
之前我直接将store的值渲染到页面,而没有和这个组件的state产生任何联系,当然store里的值改变,这个组件并不会重新渲染。
之前:
<Col>
<Button ghost>
<Link to="/login/" >
{/*{this.state.button1_text}*/}
{store.getState().store_buttuon1_text}
</Link>
</Button>
</Col>
之后:
在constructor里用store的监听函数subscribe监听store的值是否改变,如果改变则setstate(一定要用setstate,而不是直接改变this.state的值)。并设置此组件的state为store item的值。
constructor(props) {
super(props);
this.state = {
button1_text:store.getState().store_buttuon1_text,
button2_text:"Sign Up",
button3_text:"Housing List",
}
store.subscribe(() => {
this.setState({button1_text:store.getState()['store_button1_text']})
console.log(store.getState()['store_button1_text'])
}
)
}
最后将渲染的元素从store里item改成:
<Col>
<Button ghost>
<Link to="/login/" >
{this.state.button1_text}
</Link>
</Button>
</Col>
成功渲染!