Easy-peasy: Persist store ?

[revskill10]

Is there any way to persist store with redux-persist library ?

[paultannenbaum]

@revskill10

I haven't tried it yet, but it looks to me like this should be entirely possible. Easy peasy creates a redux store via the createStore method. You would just do the same thing you do with redux persist where you create a store and a persistor, and then add a persist gate and persistor to your app. Give it a go and if you can't figure it out let me know and I'll post a gist.

[ctrlplusb]

I agree with @paultannenbaum - I believe it should be possible using the APIs we currently expose.

Would be great to add an example of this in tips and tricks section. 👍

I am on holiday at the moment, but if you still need help with this when I get back I can look into it.

[steveruizok]

Give it a go and if you can't figure it out let me know and I'll post a gist.

@revskill10 Mind posting that gist? ☹️

Here's my soft start, which must be missing something:
https://codesandbox.io/s/9j2wx1kw4o

[paultannenbaum]

I played around with your gist for a while and was not able to get it to work either. I am noticing that the redux persist library is firing the persist/PERSIST action with no payload (payload usually looks something like {version:-1,rehydrated:false}), and that is stopping execution in the library. How redux persist works is that once it recieves a proper payload from the persist/PERSIST action, it then fires the persist/REHYDRATE action which once completed will render the child component inside of the persist gate.

It is worth noting that redux persist expects a combinedReducer to create a persistedReducer, and the combined reducer (via reduxs combineReducuer method) is a function and not an object. I tried importing redux and using a combined reducer, but was still not having any luck getting this library to work with Easy Peasy.

[ctrlplusb]

@paultannenbaum, @revskill10 did you come right with this in the end?

If not I can try and give it a bash.

[paultannenbaum]

@ctrlplusb I was not able to get it to work. I spent a couple of hours on it and then eventually shelved trying to get it to work.

[ctrlplusb]

All, I have got this working. Check it out here:

https://codesandbox.io/s/5464z4190x

The code isn't 100%, but try add a todo item or toggle the theme and then refresh the sandbox. You should see the rehydrated state. 👍

[devthejo]

Hello,
first thank you for this great library,
I notice you that the codesandbox link is broken (404)

[skulptur]

@ctrlplusb could you check the link please?

[ctrlplusb]

Woops, I deleted it by mistake 😊

I've brought it back to life.

Remember, you can only add todos, or change the theme.

[pixelpax]

Hey @ctrlplusb, I followed the sandbox you laid out (thank you, super helpful!) but I'm getting the error Cannot add property _persist, object is not extensible on every state change. I think it has something to do with redux-persist not being able to modify the root state of our store to add its own state info.

Might be related to:
https://github.com/rt2zz/redux-persist/issues/913

easy-peasy is using ImmutableJS under the hood, no? Would we need to use something like https://github.com/rt2zz/redux-persist-immutable ?

My package.json dependencies:

"dependencies": { "@expo/samples": "2.1.1", "@types/moment": "^2.13.0", "@types/node": "^10.12.18", "@types/react": "^16.7.18", "@types/react-dom": "^16.0.11", "axios": "^0.18.0", "easy-peasy": "^1.7.1", "expo": "^31.0.2", "lodash": "^4.17.11", "moment": "^2.23.0", "normalizr": "^3.3.0", "react": "^16.7.0-alpha.2", "react-native": "npm:@brunolemos/react-native", "react-native-animation-hooks": "^1.0.1", "react-native-wheel-scroll-picker": "^0.1.9", "react-navigation": "^2.18.2", "react-redux": "^6.0.0", "react-spring": "6", "redux": "^4.0.1", "redux-axios-middleware": "^4.0.0", "redux-persist": "^5.11.0-alpha", "remote-redux-devtools": "^0.5.16", "styled-components": "^4.1.2", "typescript": "^3.2.2", "uuid": "^3.3.2" },

[pixelpax]

Reading more and starting through source... I think it has to do with the state being frozen by immer.

As discussed in this thread:

https://github.com/rt2zz/redux-persist/issues/747

To get mine to work I had to disable autofreezing globally in Immer before bootstrapping my store.

import {setAutoFreeze} from 'immer';
setAutoFreeze(false);

This was effective, though I do wonder if I'm opening myself up to weird bugs from other middleware which immer would've protected me from. Guess I'll cross that bridge when I come to it ¯_(ツ)_/¯

@ctrlplusb, looks like there's nothing to do on easy-peasy's end except wait for redux-persist to support immer. Thanks again for making such an elegant library, I'm loving it every step of the way.

[ctrlplusb]

Hi @pixelpax! Glad to hear that you are enjoying the library.

FYI - I have put in setAutoFreeze(false) by default. I really want immer to be an implementation detail, so don't feel we should be exposing this behaviour by default.

[alizahid]

@ctrlplusb More TypeScript problems! 😅

Using the code results in this when using with TypeScript;

Argument of type '{ reducerEnhancer: (reducer: Reducer<any, any>) => Reducer<any, any>; }' is not assignable to parameter of type 'EasyPeasyConfig<any, any>'.
  Types of property 'reducerEnhancer' are incompatible.
    Type '(reducer: import("/node_modules/easy-peasy/index").Reducer<any, any>) => import("/node_modules/redux/index").Reducer<any, any>' is not assignable to type '(reducer: import("/node_modules/easy-peasy/index").Reducer<any, any>) => import("/node_modules/easy-peasy/index").Reducer<any, any>'.
      Type 'Reducer<any, any>' is missing the following properties from type 'Reducer<any, any>': type, result  TS2345

[ctrlplusb]

Hey @alizahid

No worries. 😁

Would you mind opening a new issue so we can track it. Please include example code and lib versions. 👍