Redux-persist: Flow errors

[kareemsalah227]

Reopening this again, the last issues on flow issues is from March 2018, there's a lot of Flow errors.

Also when integrating with React and using , this specific error is thrown:

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/integration/react.js:17:8

Cannot extend PureComponent [1] with PersistGate because:
 • in the return value of property render:
    • Either undefined [2] is incompatible with null [3].
    • Or property @@iterator is missing in undefined [2] but exists in $Iterable [4].
 • in the return value of property render:
    • Either undefined [5] is incompatible with null [3].
    • Or property @@iterator is missing in undefined [5] but exists in $Iterable [4].

     src/integration/react.js
 [2]  8│   children?: Node | Function,
 [5]  9│   loading?: Node,
       :
     14│   bootstrapped: boolean,
     15│ }
     16│
 [1] 17│ export class PersistGate extends PureComponent<Props, State> {
     18│   static defaultProps = {
     19│     loading: null,
     20│   }
     21│
     22│   state = {
     23│     bootstrapped: false,
     24│   }
     25│   _unsubscribe: ?Function
     26│
     27│   componentDidMount() {
     28│     this._unsubscribe = this.props.persistor.subscribe(
     29│       this.handlePersistorState
     30│     )
     31│     this.handlePersistorState()
       :
     52│
     53│   render() {
     54│     if (process.env.NODE_ENV !== 'production') {
     55│       if (typeof this.props.children === 'function' && this.props.loading)
     56│         console.error(
     57│           'redux-persist: PersistGate expects either a function child or loading prop, but not both. The loading prop will be ignored.'
     58│         )
     59│     }
     60│     if (typeof this.props.children === 'function') {
     61│       return this.props.children(this.state.bootstrapped)
     62│     }
     63│
     64│     return this.state.bootstrapped ? this.props.children : this.props.loading
     65│   }
     66│ }
     67│

     /tmp/flow/flowlib_fdae0d/react.js
 [3] 14│   | null
       :
 [4] 20│   | Iterable<?React$Node>;

It's solved by adding default values for children and loading, and making them required.

Any advice on what should I do with my React app to avoid that Flow issue?

[aguynamedben]

Potentially related Flow issues:

• https://github.com/rt2zz/redux-persist/issues/690 was closed, but users subsequently raised credible issues/challenges making Flow happy
• https://github.com/rt2zz/redux-persist/issues/780 (18 upvotes)
• https://github.com/rt2zz/redux-persist/issues/763 (7 upvotes)
• https://github.com/rt2zz/redux-persist/issues/842 (1 upvote)

A recent PR that fixed some Flow issues:

• https://github.com/rt2zz/redux-persist/pull/697

An important comment from the author about Flow usage (@rt2zz):

• https://github.com/rt2zz/redux-persist/issues/690#issuecomment-362420951 (should this be added to docs/README?)

@baransu You recently submitted Flow improvements (thank you 🙏), would you mind helping the project by looking at some of these issues and sizing up the root cause?

@kareemsalah227 Would you mind spending a little time to create a small test project that replicates these issues so we can look into them better? Also, you mention:

Also when integrating with React and using
Did you mean...
Also when integrating with React and using Flow

I haven't experienced these Flow issues myself but we should definitely get them resolved. Any help in doing so or contributing a fix to the project would be appreciated.

[kareemsalah227]

@aguynamedben Sure thing sir, I'll prepare it and share with you the links shortly, so sorry for the long time not replying you.

[kareemsalah227]

@aguynamedben I'm back, sorry for the delay again, here's a link to a mini-project and a small brief to reproduce the issue, it's not that complicated.
https://github.com/kareemsalah227/redux-persist-issue

The code inside might look a bit weird, it's because I'm working on a highly configurable, mono-repo project, I borrowed some stuff from there to make things faster.

Please let me know if you need anything else, I'm happy to help.

[erksch]

I created a pull request to fix this issue with the changes proposed by @kareemsalah227.
I added some more information about where the problem comes from.

[aguynamedben]

@erksch's PR has been merged to master. We'll need @rt2zz to release a new version for the fix to be in npm (I don't have the power to do so).

[bluebill1049]

Hi @rt2zz , could we please release another version to fix the flowtype? thanks