React View未使用redux更新

问题描述 投票:0回答:1

反应视图未更新(从不调用渲染),但调用了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

我错过了什么?

谢谢

reactjs view redux jsx
1个回答
4
投票

在您的示例中,RightPane组件不知道Redux状态已更新,因为您尚未订阅Redux状态更改。您可以使用subscribe方法直接订阅Redux商店,或者您可以使用connectReact-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);
© www.soinside.com 2019 - 2024. All rights reserved.