Redux Dev Tools not working for large action payload

Question

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 complexity 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, 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;

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 components. 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 components click handler using React-Redux mapDispatchToProps

Another two components 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 comment out this line

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

then other components 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.

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.