javascript - A Store of Actions for optimistic updates is a good approach in Redux/Flux? -

i've been working optimistic updates in react+flux application , saw 2 things:

1. what happens if user attempts close window when exists uncompleted actions. example in facebook, message appears in wall if wasn't persisted (this optimistic updates does, more responsive application user). but, if user post in wall , close application (on logout or window close), post fail , not alerted.
2. i don't idea of stores managing own entities (for example messages) , situation of action triggered persiste message (loading, succesfull, failed?). mixes things.

so work on , create actionstore manage state of actions triggered components. here is source code , here is live demo.

it works more or less this:

1. the root of components hierarchy (container in redux) fetch nextid of new action , pass childs props (this ugly).
2. a child component fires action: keeps actionid ask store after , call action creator.
3. the action creator creates new action , returns function middleware.
4. the function returned action creates new promise api call , dispatches action of type xx_start.
5. the actionstore listen xx_start action , saves it.
6. the child component receives new state , find action saved id , ask current situation: loading, successful or failed.

i've done separate state of "entities" state of actions, allows retrigger actions same payload (this useful when receive 500 response status if server temporarly down or if user loose signal).

also, having store of actions allows ask if pending actions before user logout or close window.

note: i'm working single application page web app against rest api, i'm not think use on server-side rendering

it's viable option create actionstore or i'm breaking redux/flux foundations? end posibility of use react hot reloading , time traveling?

you should answer no mercy, i've done bunch of ugly things i'm learning react/redux.

to future readers might little bewildered: don't call these functions “stores” anymore: call them reducers. question a reducer remembering actions.

personally don't approach you're suggesting there. you're putting logic actions , using inheritance this. on contrary, redux prescribes actions plain objects without logic. shouldn't “know” how update state, , shouldn't hold it—instead, should describe happened.

i think approach implementing optimistic updates in redux similar how you'd implement undo in redux, in turn inspired elm architecture. idea should write function takes reducer (and options) , returns reducer:

function optimistic(reducer) {   return function (state, action) {     // something?     return reducer(state, action);   } } 

you'd use normal reducer:

export default combinereducers({   something: optimistic(something) // wrap "something" reducer }) 

right passes state , action reducer wraps, can “remember” actions:

function optimistic(reducer) {   return function (state = { history: [] }, action) {     // history?     return {       history: [...state.history, action],       present: reducer(state.history[state.history.length - 1], action)     };   } } 

now accumulates actions in history field.

again, not useful, can see how can implement such higher order reducer that:

• keeps track of pending async actions ids , starts recording history when sees action status: 'request';
• when receives action status: 'done', resets history;
• when receives action status: 'fail', adjusts history not include initial action status: 'request' , re-runs reducer re-calculate present state if request never happened.

of course haven't provided implementation, should give idea of how implement optimistic updates in redux way.

update: per op's comment, redux-optimist seems that.