Race condition on Android with React Native #83

Closed
opened 2016-01-26 18:33:30 +00:00 by iheart2code · 2 comments
iheart2code commented 2016-01-26 18:33:30 +00:00 (Migrated from github.com)

Using the example code you provided, I get the following console log on iOS, where the app works just fine.

Running application "MyApp" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
action REDUX_STORAGE_LOAD @ 16:00:00.589
    prev state Object {initialLoad: false, currentUser: Object, entities: Object}
    action Object {type: "REDUX_STORAGE_LOAD", payload: Object}
    next state Object {initialLoad: true, currentUser: Object, entities: Object}
Loaded state: Object {}

But on Android, the storage loads immediately before the react native app starts up, causing some issues with waiting for the state to be loaded from disk. Here's the Android log.

action REDUX_STORAGE_LOAD @ 16:00:00.500
    prev state Object {initialLoad: false, currentUser: Object, entities: Object}
    action Object {type: "REDUX_STORAGE_LOAD", payload: Object}
    next state Object {initialLoad: true, currentUser: Object, entities: Object}
Loaded state: Object {}
Running application "MyApp" with appParams: {"initialProps":{},"rootTag":1}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF

Workaround

Rather than relying on componentWillReceiveProps to check if store has loaded, I'll make that check in both my componentDidMount and componentWillReceiveProps methods.

Using the example code you provided, I get the following console log on iOS, where the app works just fine. ``` Running application "MyApp" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF action REDUX_STORAGE_LOAD @ 16:00:00.589 prev state Object {initialLoad: false, currentUser: Object, entities: Object} action Object {type: "REDUX_STORAGE_LOAD", payload: Object} next state Object {initialLoad: true, currentUser: Object, entities: Object} Loaded state: Object {} ``` But on Android, the storage loads immediately before the react native app starts up, causing some issues with waiting for the state to be loaded from disk. Here's the Android log. ``` action REDUX_STORAGE_LOAD @ 16:00:00.500 prev state Object {initialLoad: false, currentUser: Object, entities: Object} action Object {type: "REDUX_STORAGE_LOAD", payload: Object} next state Object {initialLoad: true, currentUser: Object, entities: Object} Loaded state: Object {} Running application "MyApp" with appParams: {"initialProps":{},"rootTag":1}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF ``` ## Workaround Rather than relying on `componentWillReceiveProps` to check if store has loaded, I'll make that check in both my `componentDidMount` and `componentWillReceiveProps` methods.
michaelcontento commented 2016-01-27 09:02:52 +00:00 (Migrated from github.com)

I'd recommend using a reducer to keep track of the loaded-state and not in a component directly! With a custom reducer this flag is always present in the state and can be consumed by whatever component you want. Also there is no race condition, as the loader (created by storage.createLoader) requires your reducer function as argument.

Have a look at this example, as it describes how to listen on the LOAD / SAVE action.

If this does solve your question / issue, please close this thread. Otherwise keep on asking 😄

I'd recommend using a reducer to keep track of the loaded-state and **not** in a component directly! With a custom reducer this flag is always present in the state and can be consumed by whatever component you want. Also there is no race condition, as the loader (created by `storage.createLoader`) requires your reducer function as argument. Have a look [at this example](https://github.com/michaelcontento/redux-storage#actions), as it describes how to listen on the `LOAD` / `SAVE` action. If this does solve your question / issue, please close this thread. Otherwise keep on asking :smile:
iheart2code commented 2016-01-28 00:08:05 +00:00 (Migrated from github.com)

@michaelcontento your suggestion is actually exactly what I ended up doing. Thanks!

@michaelcontento your suggestion is actually exactly what I ended up doing. Thanks!
This discussion has been locked. Commenting is limited to contributors.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
MichaelContento/redux-storage#83
No description provided.