React HOC for FeatherJS Service Events

This post is less about telling and more about collaborating. The idea is go from a simple higher order component to do optimistic UI updates to a more sophisticated version to include redux store. The reason I want to include the store is I would like to synchronize UI and state.

The current version updates the hoc’s state which will be pushed to the component as prop.

I am working with Redux but this component only works on a component state.

Which means I will have a different state in my store than it is displayed in the browser. But that if fine for now. The reason I am fine is I am pulling a bunch of dependencies at once and I don’t want to refresh the data from my database every-time I am changing a piece of information.

The picture on the left shows a schematic of what this hoc does, at the moment. The code is below and here.

The code works for documents and arrays. The reason I am writing this is I would like to combine it with my redux store because it is the only piece out of sync. The database and the view have the same state but my reducer has old data.

I tried to tie in with componentWillReceiveProps but this means a bit more abstraction on the hoc’s part to merge the state with props related to the current state.

Here is the code how it is currently applied.

The code for posts is basically a proxy to shift from document to data and back to document. This seems kind of confusing but I thought data might be a good key since documents and arrays are not applicable. I’d love to discuss a better solution to do this. Thanks.