我的问题：为什么在不可变状态 (Map) 中更新数组中对象的属性不会导致 Redux 更新我的组件？
我正在尝试创建一个将文件上传到我的服务器的小部件，我的初始状态（从我的 UploaderReducer 内部，您将在下面看到）对象如下所示：
let initState = Map({
files: List(),
displayMode: 'grid',
currentRequests: List()
});
我有一个 thunk 方法，它在发生事件（例如进度更新）时开始上传和分派操作。例如，onProgress 事件如下所示：
onProgress: (data) => {
dispatch(fileUploadProgressUpdated({
index,
progress: data.percentage
}));
}
我redux-actions用来创建和处理我的动作，所以我的这个动作的减速器看起来像这样：
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基本上是一个拖累n个墨滴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>
);
}
}
因此，最终，如果我尝试更新以下状态对象中的“进度”，React/Redux 不会更新我的组件：
{
UploaderReducer: {
files: [{progress: 0}]
}
}
为什么是这样？我认为使用 Immutable.js 的整个想法是更容易比较修改后的对象，而不管你更新它们的深度如何？
通常让 Immutable 与 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)
);
这非常有效！:)