Redux-persist: Demo for angular 2/4

[eaponiente]

Hi, it would be highly appreciated if there would also be angular2 sample implementation of redux-persist in an angular2 app using redux. I am fairly new to redux but have implemented it.

I am having a hard time on how to implement it on angular2 app since most of the examples are created in react.

[rt2zz]

@eaponiente the basic strategy is to listen for when persistor is bootstrapped, and delay rendering until bootstrapped is true. I have no knowledge of angular, but there should be some way to show a loading indicator while a process is occurring. You can see in the react integration we set up a listener for when persistorState.bootstrapped === true. https://github.com/rt2zz/redux-persist/blob/master/src/integration/react.js

If you get a good working example I would love to include the integration into the lib and the example into the docs.

[maplion]

@rt2zz without some good examples or proper documentation, I am finding it difficult to wire this up in such a way that I actually get the redux action to even fire. (especially with the recent changes using persistReducer and doing this in angular). What does this tool give me that would be beyond installing something like localForage and just having some exit actions store locally and some on-load actions rehydrate [right now, this seems like it may be a more straight-forward path]?

[rt2zz]

@maplion that can be a good strategy for simple cases. This lib will help with a number of things that you may need now or down the road:

• better perf by default (splits up the serialization work)
• stored state migrations
• knowing when rehydration is complete
• pause / flush / purge
• support code splitting reducers

All told the trade off is basically 5kb for a robust persistence solution.

[maplion]

@rt2zz Thank you for the response and information. I would like to try to utilize it and will attempt to provide an angular example if I get it working.

[feimosi]

I've just successfully connected redux-persist with Angular 5 and ngredux.

Basically, you have to create a store with plain redux and then provide it to the ngredux. I haven't implemented PersistGate counterpart in Angular yet but it works fine without it. Here's the code:

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(
  persistedReducer,
  rehydratedState,
  compose(
    applyMiddleware(...middleware),
    ...enhancers,
  ),
);
const persistor = persistStore(store);

this.ngRedux.provideStore(store);

[arkD]

@feimosi This is incredibly helpful! now i can use this powerful library, thank you so much!

[embashgit]

i am having some error code like ERROR in node_modules/redux-persist/types/integration/react.d.ts(24,29): error TS2304: Cannot find name 'React'. in my angularjs when configuring redux-persist