Question

更新：我从第一篇文章中略微缩小了这个问题。请查看最新更新。问题似乎与动作有效负载的大小或复杂性有关，而不是因为在异步调用之后调用了动作。

我正在开发react / redux应用程序，并且在使用redux dev工具chrome扩展中的时间旅行功能时出现问题。

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

中运行应用程序

应用程序本身是工作函数（所有代码都在typescript中）

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

继承我的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和连接装饰器将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;
 }

当我调试此函数时，它不应该被调用（并且之后是

）

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

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

然后依赖reducers进行此操作的其他组件正常工作，dev工具重放按预期工作。有了这条线，就失败了。问题似乎是“data：action.data.rows”。 rows是一个数组，如果我改变它以返回一个空数组，那么重放是有效的。

我想我今天会放弃。

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

return {data：action.data.rows.slice（0,3），selected：state.selected}

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

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

Answer 1

查看Redux Devtools Excessive use of memory and CPU故障排除：

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

Redux Dev Tools无法用于大型动作负载

1 个答案: