Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/419.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Redux开发工具不适用于大型操作负载_Javascript_Reactjs_Redux - Fatal编程技术网

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

Javascript Redux开发工具不适用于大型操作负载,javascript,reactjs,redux,Javascript,Reactjs,Redux,更新:从第一篇文章开始,我已经缩小了这个问题的范围。请查看最新更新。问题似乎与操作负载的大小或复杂性有关,而不是因为操作是在异步调用之后调用的 我正在开发react/redux应用程序,在使用redux开发工具chrome扩展中的时间旅行功能时遇到问题 在滑块监视器中重播应用程序时,对webapi操作的第一个异步调用不会重播。所有同步操作和异步网络调用(第一个除外)都可以正常工作。这只是第一个不渲染的。我尝试过在异步中只使用redux thunk,但也尝试过redux saga(当前配置)。我正

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

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

在滑块监视器中重播应用程序时,对webapi操作的第一个异步调用不会重播。所有同步操作和异步网络调用(第一个除外)都可以正常工作。这只是第一个不渲染的。我尝试过在异步中只使用redux thunk,但也尝试过redux saga(当前配置)。我正在Web包开发服务器中运行应用程序

应用程序本身是工作函数(所有代码都是typescript)

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

这是我的配置存储文件

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和connectdecorator将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;
 }
当我调试这个函数时,它不会在应该调用的时候调用(并且是在之后调用)

更新: 我已经找到了“ReceiveLogs”的缩减器,Redux Saga调用了它。我有三个减速机。如果我把这行注释掉

case "ReceiveLogs":
        return  {data:action.data.rows, selected:state.selected}
然后,依赖于此操作的还原器的其他组件可以正常工作,而开发工具replay也可以按预期工作。有了这条线,它就失败了。问题似乎是“数据:action.data.rows”。行是一个数组,如果我将其更改为返回空数组,则replay可以工作

我想我今天会放弃的

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

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

然后它就起作用了。如果我包含数组的第四个成员,它将不起作用。数组的第四个成员比其他成员大得多,因为它包含了相当大(和深)的对象

操作有效负载和redux开发工具是否有某种大小限制???我将继续播放。

查看Redux Devtools疑难解答:

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


我认为问题不在于您的中间件或saga,而在于启动您的操作和组件生命周期。你能把那部分也贴出来吗?谢谢,我已经更新了帖子