React 组件不使用 connect() 重新渲染答案

【问题标题】：React component not re-rendering with connect()React 组件不使用 connect() 重新渲染
【发布时间】：2017-04-10 14:04:57
【问题描述】：

我的减速机：

export default function summary(state = {
  "summary":null
}, action = null) {
    switch (action.type) {

    case GET_SUMMARY_REQUEST_SUCCESS:
        const newState = Object.assign({}, state);
        newState.summary = action.data;
        return newState;
        break;
    case GET_SUMMARY_REQUEST_ERROR:
        return Object.assign({}, state, {
          sumary:null
        });
        break;

    default: return state;
    }
};

根减速器：

import summary from './Summary.js'
const rootReducer = combineReducers({
    summary
});

在我的组件中，我使用 connect 将状态映射到 props> 我的组件渲染功能是这样的：

render() {
    const summary = this.props.summaryContent || [];
        return (
            <div className={cx(styles['loading'])} >
              <Loader width="4" />
              {"Loading\u2026"}
            </div>
        );
}

function mapStateToProps(state, ownParams) {
    return {
        summaryContent: state.summary
    };
}

export default connect(mapStateToProps)(Summary);

在 componentWillMount 上，我正在调度一个动作以更新状态摘要。现在，我的 componentWillReceiveProps 向我展示了更新后的状态摘要，但组件没有呈现。

【问题讨论】：

标签： reactjs redux

【解决方案1】：

我可以在这里看到一些问题：

您使用summary 作为reducer 键和reducer 状态的索引。这意味着summaryContent 应该映射到state.summary.summary。（虽然我建议将其更改为采用不那么容易混淆的命名约定。）
您的渲染函数没有以任何有用的方式使用this.props.summaryContent。它只是将它分配给一个变量，然后返回一个加载输出。
在GET_SUMMARY_REQUEST_ERROR 的情况下，您拼错了summary。

我强烈建议配置 ESLint，它会提醒您注意未使用和拼写错误的变量等问题。

【讨论】：