React-Redux中mapStateToProps未触发组件更新如何解决

问题根因 #

• 核心原因是你在Redux reducer中直接修改了原有state对象，没有返回全新的state实例：Redux的connect高阶组件默认通过浅比较新旧state的引用判断是否需要触发组件重渲染，直接修改原state属性不会改变state的内存地址，会被判定为状态无变更，因此不会更新组件。
• 代码同时存在两处变量引用错误：
  1. reducer逻辑中state.data = data的data变量未定义，正确取值应该是action.data
  2. Loader类的dispatch方法接收的参数为allDocuments，但实际传参时写的是data: data，data变量未定义，应该传入接收的参数allDocuments
• 额外注意：Loader.js中没有引入store实例，会导致调用store.dispatch时报错。

修复代码示例 #

store.js #

/* store.js */
import { createStore } from 'redux';

const reducer = (state = {}, action) => {
  if (action.type === 'action') {
    // 返回全新的state对象，禁止修改原state
    return {
      ...state,
      data: action.data
    }
  }
  return state;
}

const store = createStore(reducer);

store.subscribe(() => {
  console.log(store.getState());
});

export default store;

Loader.js #

/* Loader.js */
import store from './store'; // 补充引入store实例

class Loader {
  dispatch (allDocuments) {
    store.dispatch({
      type: 'action',
      data: allDocuments // 替换为正确的参数变量
    });
  }

  async fetchData () {
    try {
      const allDocuments = await ajaxCall('GET', '/fetchData');
      this.dispatch(allDocuments);
      return allDocuments;
    } catch (e) {
      console.error(e);
    }
  }
}

export default Loader;

内容的提问来源于stack exchange，提问作者Magdi Gamal