更新深度不可变状态属性时，Redux不更新组件

Question

我的问题：为什么不在我的不可变状态（Map）中更新数组中对象的属性不会导致Redux更新我的组件？

我正在尝试创建一个将文件上传到我的服务器的小部件，我的初始状态（从我将在下面看到的UploaderReducer内部）对象看起来像这样：

let initState = Map({
  files: List(),
  displayMode: 'grid',
  currentRequests: List()
});

我有一个thunk方法，可以在事件发生时启动上传和调度操作（例如进度更新）。 例如，onProgress事件如下所示：

onProgress: (data) => {
    dispatch(fileUploadProgressUpdated({
      index,
      progress: data.percentage
    }));
  } 

我正在使用redux-actions来创建和处理我的动作，所以我对该动作的reducer看起来像这样：

export default UploaderReducer = handleActions({
  // Other actions...
  FILE_UPLOAD_PROGRESS_UPDATED: (state, { payload }) => (
    updateFilePropsAtIndex(
      state,
      payload.index,
      {
        status: FILE_UPLOAD_PROGRESS_UPDATED,
        progress: payload.progress
      }
    )
  )
  }, initState);

并且updateFilePropsAtIndex看起来像：

export function updateFilePropsAtIndex (state, index, fileProps) {
  return state.updateIn(['files', index], file => {
    try {
      for (let prop in fileProps) {
        if (fileProps.hasOwnProperty(prop)) {
          if (Map.isMap(file)) {
            file = file.set(prop, fileProps[prop]);
          } else {
            file[prop] = fileProps[prop];
          }
        }
      }
    } catch (e) {
      console.error(e);
      return file;
    }

    return file;
  });
}

到目前为止，这一切似乎都运行良好！ 在Redux DevTools中，它显示为预期的动作。 但是，我的组件都没有更新！ 将新项目添加到files数组会重新呈现我添加了新文件的UI，因此Redux当然没有问题...

我使用connect连接到商店的顶级组件如下所示：

const mapStateToProps = function (state) {
  let uploadReducer = state.get('UploaderReducer');
  let props = {
    files: uploadReducer.get('files'),
    displayMode: uploadReducer.get('displayMode'),
    uploadsInProgress: uploadReducer.get('currentRequests').size > 0
  };

  return props;
};

class UploaderContainer extends Component {
  constructor (props, context) {
    super(props, context);
    // Constructor things!
  }

  // Some events n stuff...

  render(){
      return (
      <div>
        <UploadWidget
          //other props
          files={this.props.files} />
       </div>
       );
  }
}

export default connect(mapStateToProps, uploadActions)(UploaderContainer);  

uploadActions是一个使用redux-actions创建redux-actions的对象。

files数组中的file对象基本上是这样的：

{
    name: '',
    progress: 0,
    status
}

UploadWidget基本上是一个拖放div和一个打印在屏幕上的files数组。

我尝试使用redux-immutablejs来帮助我，就像我在GitHub上的许多帖子中看到的那样，但我不知道它是否有帮助...这是我的根减速器：

import { combineReducers } from 'redux-immutablejs';
import { routeReducer as router } from 'redux-simple-router';
import UploaderReducer from './modules/UploaderReducer';

export default combineReducers({
  UploaderReducer,
  router
});

我的app入口点如下所示：

const store = configureStore(Map({}));

syncReduxAndRouter(history, store, (state) => {
  return state.get('router');
});

// Render the React application to the DOM
ReactDOM.render(
  <Root history={history} routes={routes} store={store}/>,
  document.getElementById('root')
);

最后，我的<Root/>组件如下所示：

import React, { PropTypes } from 'react';
import { Provider } from 'react-redux';
import { Router } from 'react-router';

export default class Root extends React.Component {
  static propTypes = {
    history: PropTypes.object.isRequired,
    routes: PropTypes.element.isRequired,
    store: PropTypes.object.isRequired
  };

  get content () {
    return (
      <Router history={this.props.history}>
        {this.props.routes}
      </Router>
    );
  }

//Prep devTools, etc...

  render () {
    return (
      <Provider store={this.props.store}>
        <div style={{ height: '100%' }}>
          {this.content}
          {this.devTools}
        </div>
      </Provider>
    );
  }
}

因此，最终，如果我尝试更新以下状态对象中的“进度”，则React / Redux不会更新我的组件：

 {
    UploaderReducer: {
        files: [{progress: 0}]
    }
 }

为什么是这样？ 我认为使用Immutable.js的整个想法是，无论您更新它们有多深，都比较容易比较修改过的对象？

看起来一般使用Redux与Redux一起工作并不像看起来那么简单： 如何在REDx中使用Immutable.js？ https://github.com/reactjs/redux/issues/548

然而，使用Immutable的吹捧好处似乎值得这场战斗，我很想知道我做错了什么！

更新2016年4月10日选定的答案告诉我我做错了什么，为了完整起见，我的updateFilePropsAtIndex函数现在只包含这个：

return state.updateIn(['files', index], file =>
  Object.assign({}, file, fileProps)
);

这非常有效！ :)

Answer 1

两个一般的想法第一：

• Immutable.js 可能很有用，是的，但您可以在不使用它的情况下完成相同的不可变数据处理。 有许多库可以帮助使不可变数据更新更容易阅读，但仍然可以在普通对象和数组上运行。 我在Redux相关的库repo中的不可变数据页面上列出了很多。
• 如果React组件似乎没有更新，那几乎总是因为reducer实际上是在改变数据。 Redux FAQ在http://redux.js.org/docs/FAQ.html#react-not-rerendering上有关于该主题的答案。

现在，假设你正在使用Immutable.js，我承认数据的突变似乎有点不太可能。 那说...你的reducer中的file[prop] = fileProps[prop]行似乎非常好奇。 你究竟想要去那里的是什么？ 我会好好看看那一部分。

实际上，现在我看着它......我几乎100％肯定你在改变数据。 您的updater回调到state.updateIn(['files', index])将返回与参数完全相同的文件对象。 根据https://facebook.github.io/immutable-js/docs/#/Map上的Immutable.js文档：

如果updater函数返回与调用的值相同的值，则不会发生任何更改。 如果提供notSetValue，则仍然如此。

是的。 你返回的是你给出的相同值，你的直接突变出现在DevTools中，因为那个对象仍然在闲逛，但是因为你返回了同一个对象，所以Immutable.js实际上并没有进一步返回任何修改过的对象层次结构。 因此，当Redux检查顶级对象时，它看到没有任何更改，不会通知订阅者，因此组件的mapStateToProps永远不会运行。

清理你的减速器并从更新器内部返回一个新对象，它应该都可以正常工作。

（一个相当迟来的答案，但我刚刚看到了这个问题，它似乎仍然是开放的。希望你现在实际上已经解决了......）