React View 没有用 redux 更新答案

【问题标题】：React View is not updated with reduxReact View 没有用 redux 更新
【发布时间】：2017-09-18 01:46:41
【问题描述】：

react 视图未更新（从未调用渲染），但调用了 reducer。

我有以下几点：

1)。反应视图：如果我需要显示“TodoList”或“HousingInfo”，我会阻止一个处于根状态的字段

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)。减速器：调用了以下减速器

 const mainRightPanePage = (state = {'currentPage':'TodoList'}, action) => {
   switch (action.type) {
     case 'switchPage':
       return Object.assign({}, state, {
          currentPage: action.pageId
      })
  default:
    return state
  }
}

 export default mainRightPanePage

我错过了什么？

谢谢

【问题讨论】：

你在哪里使用store.subscribe()？或者您可以使用react-redux 将存储数据连接到组件

标签： reactjs view redux jsx

【解决方案1】：

在您的示例中，RightPane 组件不知道 Redux 状态已更新，因为您尚未订阅 Redux 状态更改。您可以使用subscribe 方法直接订阅 Redux 存储，也可以使用React-Redux 中的connect 方法将您的组件连接到 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);

【讨论】：