React View未使用redux更新

Question

反应视图未更新（从不调用渲染），但调用了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

我错过了什么？

谢谢

Answer 1

在您的示例中，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);