Redux 开发工具不适用于大型操作负载答案

【问题标题】：Redux Dev Tools not working for large action payloadRedux 开发工具不适用于大型操作负载
【发布时间】：2016-11-29 01:20:44
【问题描述】：

更新：我已经从第一篇文章中缩小了很多范围。请查看最新更新。问题似乎与操作负载的大小或复杂性有关，而不是因为操作是在异步调用之后调用的。

我正在开发一个 react/redux 应用程序，但在使用 redux 开发工具 chrome 扩展中的时间旅行功能时遇到问题。

当我在滑块监视器中重播应用程序时，对 webapi 操作的第一次异步调用不会重播。除了第一个之外，所有同步操作和异步网络调用都可以正常工作。它只是第一个不渲染的。我试过只使用 redux-thunk 进行异步，但也尝试过使用 redux-saga （当前配置）。我在 webpack-dev-server 中运行应用程序

应用程序本身正在运行（所有代码都在打字稿中）

我尝试了各种配置更改，但似乎没有任何效果。任何想法将不胜感激。

这是我的 configureStore 文件

function configureStore() {

const sagaMiddleware = createSagaMiddleware()

const store = createStore(rootreducer, compose(
    applyMiddleware(invariant(), sagaMiddleware, thunk),
    window.devToolsExtension ? window.devToolsExtension() : (f:any) => f
));

if (window.devToolsExtension) window.devToolsExtension.updateStore(store);

sagaMiddleware.run(logsSaga)

return store; 
}

export default configureStore;

我的传奇

function* fetchLogs(logSearchParams: any) {
 try {
      const data = yield call(getLogTableData, 
               logSearchParams.params);

  yield put({type: "ReceiveLogs", 
    data, logSearchParams:logSearchParams.params});
   } catch (e) {
      yield put({type: "LogsError", message: e.message});
   }
}
export function* logsSaga() {
  yield* takeEvery("RequestLogs", fetchLogs);
}

和网络调用

return window.fetch('api/logs/gettable', {
        method: 'post',
        body: JSON.stringify(logSearchParams),
        headers: headers
    }).then(r => r.json());

感谢您的帮助

编辑：我正在使用 Redux-React 和 connect 装饰器将 Redux 与组件连接起来。动作是从 actionCreator 调用的

export let searchClicked = () => {
     return (dispatch, getState) =>   {

    let params = getSearchParms(getState());

    return dispatch({type:'RequestLogs', params});
     }
};

这是使用 React-Redux mapDispatchToProps 连接到组件点击处理程序的

另外两个组件通过 mapStateToProps 接收状态，例如

 function mapStateToProps(state) {

     return state.logs;
 }

当我调试这个函数时，它应该（以及之后）没有被调用

更新：我已将问题追溯到 Redux-Saga 调用的“ReceiveLogs”的减速器。我为这个动作准备了三个减速器。如果我注释掉这一行

case "ReceiveLogs":
        return  {data:action.data.rows, selected:state.selected}

然后其他依赖 reducer 执行此操作的组件正常工作，并且开发工具重播按预期工作。有了这条线，它就失败了。问题似乎是“数据：action.data.rows”。 rows 是一个数组，如果我将其更改为返回一个空数组，那么重播就可以了。

我想我今天会放弃。

更新：看来问题可能与作为 ReceiveLogs 有效负载的一部分发送的数组大小有关。如果我通过切片来限制数组的大小，例如

return {data:action.data.rows.slice(0, 3), selected:state.selected}

然后就可以了。如果我包含数组的第四个成员，它就不起作用。数组的第 4 个成员明显大于其他成员，因为它包含相当大（和深）的对象。

动作有效负载和 redux-dev-tools 是否有某种大小限制？？？我继续玩。

【问题讨论】：

我认为问题不在于您的中间件或 saga，而更多在于您触发操作和组件生命周期时的问题。你能把那部分也发一下吗？
谢谢，我已经更新了帖子

标签： javascript reactjs redux

【解决方案1】：

查看 Redux Devtools Excessive use of memory and CPU 疑难解答：

这是由于状态或操作中包含的一些巨大对象的序列化而发生的。解决办法是sanitize them。

【讨论】：