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创建操作的对象。

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

{
    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
});

我的应用入口点如下所示：

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>
    );
  }
}

所以，最终，如果我尝试更新以下状态对象中的'progress'，React / Redux不会更新我的组件：

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

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

看起来一般使用Redux与Redux一起使用并不像看起来那么简单： How to use Immutable.js with redux? 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相关的库回购中的Immutable Data页面上列出了许多。
如果React组件似乎没有更新，那么它几乎总是因为reducer实际上是在改变数据。 Redux FAQ在http://redux.js.org/docs/FAQ.html#react-not-rerendering。

现在，鉴于使用Immutable.js，我承认数据的变异似乎不太可能。那说......你的减速机里的file[prop] = fileProps[prop]线看起来确实很奇怪。你究竟想要去那里的是什么？我会好好看一下那部分。

实际上，现在我看一下......我几乎100％肯定你在改变数据。您的更新程序回调到state.updateIn(['files', index])将返回与参数完全相同的文件对象。根据{{3}}的Immutable.js文档：

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

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

清理你的reducer并从更新器里面返回一个新对象，它只能正常工作。

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

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

1 个答案: