反应视图未更新(从不调用渲染),但调用了reducer。
我有以下内容:
1)。反应视图:我是根状态的字段,以确定是否需要显示“房屋信息”的“待办事项列表”
export default class RightPane extends React.Component{
static contextTypes = {
store: React.PropTypes.object
}
render(){
let store = this.context.store;
let curPage = store.getState()["mainRightPanePage"].currentPage;
return (
<div>
{(store.getState()["mainRightPanePage"].currentPage==="TodoList") && <TodoList/>}
{(store.getState()["mainRightPanePage"].currentPage==="HousingInfo") && <HousingInfo/>}
</div>
)
}
}
2)。在另一个组件中调度的操作
export default class LeftPane extends React.Component{
static contextTypes = {
store: React.PropTypes.object
}
handleink(pageId, e) {
e.preventDefault();
let store = this.context.store;
store.dispatch({'type':'switchPage', 'pageId':pageId});
...
}
3)。 reducer:调用了以下reducer
const mainRightPanePage = (state = {'currentPage':'TodoList'}, action) => {
switch (action.type) {
case 'switchPage':
return Object.assign({}, state, {
currentPage: action.pageId
})
default:
return state
}
}
export default mainRightPanePage
我错过了什么?
谢谢
在您的示例中,RightPane
组件不知道Redux状态已更新,因为您尚未订阅Redux状态更改。您可以使用subscribe方法直接订阅Redux商店,或者您可以使用connect的React-Redux
方法将您的组件连接到Redux商店(推荐):
import {connect} from 'react-redux';
...
class RightPane extends React.Component{
...
render(){
let currentPage = this.props.currentPage;
return (
<div>
{(currentPage === "TodoList") && <TodoList/>}
{(currentPage === "HousingInfo") && <HousingInfo/>}
</div>
)
}
}
const mapStateToProps = (state) => {
return {
currentPage: state.mainRightPanePage.currentPage
}
};
export default connect(
mapStateToProps
)(RightPane);