Redux - 在 reducer 中更新了状态，但没有将新值更新到组件答案

【问题标题】：Redux - state updated in reducer but not updating the new values to componentRedux - 在 reducer 中更新了状态，但没有将新值更新到组件
【发布时间】：2018-09-23 10:18:52
【问题描述】：

在结合 React 应用程序更新 redux 中的状态时，在 reducer 中更新状态。但是在容器中，我仍然是旧状态。

下面是reducer。

import * as constants from '../actions/constants';

export function caseTypes(state=[], action) {
  switch(action.type) {
    case constants.LOAD_CASE_TYPES_SUCCESS:
      return action.caseTypes
    default:
      return state;
  }
}

export function cases(state=[], action) {
  switch (action.type) {
    case constants.LOAD_CASES_SUCCESS:
        const newState = Object.assign({}, state, {cases:action.cases})
        alert('newstate' + newState.cases)
        return newState;
    default:
        return state;
  }
}

如果我在减速器“案例”中保持警报，我将获得更新到状态的新值。但是在下面的组件中，我的状态仍然很旧 mapStateToProps 函数。 Action 是从 CaseSearchConnectComponent 调度的，并且 CaseSearchConnectComponent 内部的 mapStateToProps 也给出了旧值。

class casePage extends React.Component {
  render() {
    return(
      <div>
        <div height="100px">
          <CaseSearchConnectComponent/>
        </div>
        {this.props.loadCaseList && 
          <div>
            <CaseListConnectComponent cases={this.props.cases}/>
          </div>
        }
      </div>
    )
  }
}

function mapStateToProps(state) {
  alert("case page cases  " + state.cases)
  return {
    cases:state.cases 
  };
}

const CasePageConnectComponent = connect(mapStateToProps)(casePage);
export default CasePageConnectComponent;

【问题讨论】：

嗨。你能告诉我'loadCaseList'是如何传递到casePage组件的吗？另外，mapStateToProps 中的警报是否被调用？
我会删除警报，并将console.log 放在两个地方：在casePage 的render 函数的开头，在return 之前，在reducer 中，就在case constants.LOAD_CASES_SUCCESS 之后。告诉我们你发现了什么。
@AbhayShiro：抱歉，我错过了 mapStateToProps 和 reducer 中的 loadCaseList。 mapStateToProps 内部的警报被调用，但它不返回在 reducer 中设置的值。但是 reducer 内部的警报给出了更新的值。
cases 的初始状态为state=[]，然后在接收到操作类型 LOAD_CASES_SUCCESS 后，将其更改为 JSON 对象 { cases: [..] }。有什么特别的原因吗？它会引起很多混乱。
@ThoVu：不。我刚刚这样做了，没有具体原因。基本上，最初调用 caseTypes reducer 函数，我得到容器中 caseTypes 的值。但是，在调用“cases”reducer 函数后，reducer 中的警报会显示 case 值。但在我的组件中，我无法获得案例价值。但是，caseTypes 是可用的，它是在页面加载时添加的。

标签： reactjs redux

【解决方案1】：

您在mapStateToProps 之后错过了mapDispatchToProps。 mapStateToProps 和 mapDispatchToProps 都是纯函数，分别提供存储“状态”和“调度”。此外，这两个函数都必须返回一个对象，然后将其键作为它们连接到的组件的 props 传递。

请考虑此documentation 以供参考。

【讨论】：

抱歉，我认为这不能解决问题。 mapDispatchToProps 在这里无关紧要，如果你想用你的组件调度动作，你只需要使用它。
哦，你没有提供action!!。 action 是需要 fetch 数据通过 API 然后将这些数据传递到设置 state 的 reducer 的地方。从 reducer，你的映射状态到使用 mapStateToProps 的道具。我认为您的减速器已使用代理值进行了更新。 Redux 不采取行动将无法工作。 Action 和 Reducer 是状态管理的两个组成部分。
@Thananjaya，谢谢。动作已经通过，在减速器中，我可以看到动作中的值更新到状态。 reducer 的警报“alert('newstate' + newState.cases)”显示了新值。操作已从 CasePage 组件中给出的 CaseSearchConnectComponent 触发。
好。如果您愿意，请将我的答案标记为正确答案。快乐的黑客攻击！