javascript - Redux Dev Tools not working for large action payload -


update: i've narrowed down issue quite bit first post. please see latest update. problem appears to size or complexity of action payload rather being because action invoked following async call.

i'm working on react/redux application , having problem using time travel feature in redux dev tools chrome extension.

when replay application in slider monitor first async call webapi action not replay. synchronous actions , async network calls except first work fine. first doesn't render. i've tried using redux-thunk async, have tried redux-saga (the current configuration). im running application in webpack-dev-server

the application working function (all code in typescript)

i've tried kinds of configuration changes, nothing seems have effect. ideas appreciated.

heres 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 network call

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

thanks help

edit: i'm using redux-react , connect decorator connect redux components. action called actioncreator

export let searchclicked = () => {      return (dispatch, getstate) =>   {      let params = getsearchparms(getstate());      return dispatch({type:'requestlogs', params});      } }; 

this wired in components click handler using react-redux mapdispatchtoprops

another 2 components receive state via mapstatetoprops, example

 function mapstatetoprops(state) {       return state.logs;  } 

when debug function isn't invoked when should (and afterwards)

update: i've tracked problem down reducer "receivelogs", invoked redux-saga. have 3 reducers action. if comment out line

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

then other components rely on reducers action work correctly , dev tools replay works expected. line, fails. problem appears "data:action.data.rows". rows array , if change return empty array, replay works.

i think i'll give today.

update: appears problem possibly size of array sent part of receivelogs payload. if restrict size of array slicing e.g

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

then works. if include 4th member of array, doesn't work. 4th member of array larger others since has quite large (and deep) , object included.

is there kind of size limit action payloads , redux-dev-tools??? i'll carry on playing.


Comments

Popular posts from this blog

jOOQ update returning clause with Oracle -

java - Warning equals/hashCode on @Data annotation lombok with inheritance -

java - BasicPathUsageException: Cannot join to attribute of basic type -