UPDATE: I've narrowed down the issue quite a bit from this first post. please see the latest update. The problem appears to be to do with the size or plexity of the action payload rather than it being because the action is invoked following an async call.

I'm working on a react/redux application and am having a problem using the time travel feature in redux dev tools chrome extension.

When I replay the application in the slider monitor the first async call to a webapi action does not replay. All synchronous actions and async network calls except the first work just fine. Its just the first that doesn't render. I've tried using just redux-thunk for the async, but have also tried it with redux-saga (the current configuration). Im running the application in webpack-dev-server

The application itself is working function (all code is in typescript)

I've tried all kinds of configuration changes, but nothing seems to have any effect. Any ideas would be greatly appreciated.

Heres my configureStore file

function configureStore() {

const sagaMiddleware = createSagaMiddleware()

const store = createStore(rootreducer, pose(
    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;

my saga

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

and the network call

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

Thanks for any help

EDIT: I'm using Redux-React and the connect decorator to connect Redux with the ponents. The action is called from an actionCreator

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

    let params = getSearchParms(getState());

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

This is wired in to the ponents click handler using React-Redux mapDispatchToProps

Another two ponents receive the state via mapStateToProps, for example

 function mapStateToProps(state) {

     return state.logs;
 }

When I debug this function isn't invoked when it should be (and is afterwards)

UPDATE: I've tracked the problem down to a reducer for "ReceiveLogs", which is invoked by Redux-Saga. I have three reducers for this action. If I ment out this line

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

then other ponents which rely on reducers for this action work correctly and the dev tools replay works as expected. With this line, it fails. The problem appears to be "data:action.data.rows". rows is an array and if I change this to return an empty array, then replay works.

I think I'll give up for today.

UPDATE: It appears that the problem is possibly to do with the size of the array which is sent as part of the ReceiveLogs payload. if I restrict the size of the array by slicing e.g

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

then it works. If I include the 4th member of the array, it doesn't work. The 4th member of the array is significantly larger than the others since it has quite a large (and deep) and object included.

Is there some kind of size limit for action payloads and redux-dev-tools??? I'll carry on playing.

UPDATE: I've narrowed down the issue quite a bit from this first post. please see the latest update. The problem appears to be to do with the size or plexity of the action payload rather than it being because the action is invoked following an async call.

I'm working on a react/redux application and am having a problem using the time travel feature in redux dev tools chrome extension.

When I replay the application in the slider monitor the first async call to a webapi action does not replay. All synchronous actions and async network calls except the first work just fine. Its just the first that doesn't render. I've tried using just redux-thunk for the async, but have also tried it with redux-saga (the current configuration). Im running the application in webpack-dev-server

The application itself is working function (all code is in typescript)

I've tried all kinds of configuration changes, but nothing seems to have any effect. Any ideas would be greatly appreciated.

Heres my configureStore file

function configureStore() {

const sagaMiddleware = createSagaMiddleware()

const store = createStore(rootreducer, pose(
    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;

my saga

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

and the network call

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

Thanks for any help

EDIT: I'm using Redux-React and the connect decorator to connect Redux with the ponents. The action is called from an actionCreator

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

    let params = getSearchParms(getState());

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

This is wired in to the ponents click handler using React-Redux mapDispatchToProps

Another two ponents receive the state via mapStateToProps, for example

 function mapStateToProps(state) {

     return state.logs;
 }

When I debug this function isn't invoked when it should be (and is afterwards)

UPDATE: I've tracked the problem down to a reducer for "ReceiveLogs", which is invoked by Redux-Saga. I have three reducers for this action. If I ment out this line

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

then other ponents which rely on reducers for this action work correctly and the dev tools replay works as expected. With this line, it fails. The problem appears to be "data:action.data.rows". rows is an array and if I change this to return an empty array, then replay works.

I think I'll give up for today.

UPDATE: It appears that the problem is possibly to do with the size of the array which is sent as part of the ReceiveLogs payload. if I restrict the size of the array by slicing e.g

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

then it works. If I include the 4th member of the array, it doesn't work. The 4th member of the array is significantly larger than the others since it has quite a large (and deep) and object included.

Is there some kind of size limit for action payloads and redux-dev-tools??? I'll carry on playing.

• javascript
• reactjs
• redux

• I don't think the problem is with your middleware or saga, but more with when you fire your actions and your ponent lifecycle. Can you post that part as well? – r0dney Commented Jul 25, 2016 at 15:52
• Thanks, I've updated the post – toasties Commented Jul 25, 2016 at 16:36

1 Answer 1

Check out Redux Devtools Excessive use of memory and CPU Troubleshooting:

That is happening due to serialization of some huge objects included in the state or action. The solution is to sanitize them.