https://github.com/bamlab/redux-enhancer-react-native-appstate
Connect your App State changes directly to your Redux store
https://github.com/bamlab/redux-enhancer-react-native-appstate
Last synced: about 1 year ago
JSON representation
Connect your App State changes directly to your Redux store
- Host: GitHub
- URL: https://github.com/bamlab/redux-enhancer-react-native-appstate
- Owner: bamlab
- License: mit
- Created: 2017-03-16T10:11:38.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-12T06:49:03.000Z (over 3 years ago)
- Last Synced: 2024-10-30T08:51:22.538Z (over 1 year ago)
- Language: JavaScript
- Size: 250 KB
- Stars: 90
- Watchers: 4
- Forks: 7
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# redux-enhancer-react-native-appstate
Connect your App State changes directly to your Redux store!
## Installation
```
npm install --save redux-enhancer-react-native-appstate
```
## Usage
When you create your Redux store, add the enhancer:
```javascript
import { createStore } from 'redux';
import applyAppStateListener from 'redux-enhancer-react-native-appstate';
...
const store = createStore(reducers, initalState, [
applyAppStateListener(),
]);
```
The store will now automatically dispatch app state related actions.
For instance, you can use it in a reducer:
```javascript
import { FOREGROUND, BACKGROUND, INACTIVE } from 'redux-enhancer-react-native-appstate';
function reducer(state = '', action) {
switch (action.type) {
case FOREGROUND:
return 'back to foreground';
case BACKGROUND:
return 'background';
case INACTIVE:
return 'inactive';
default:
return state
}
}
```
### Usage with Redux Saga
Make sure that this enhancer is applied before the saga middleware.
Otherwise, your saga would not be able to intercept the actions.
```javascript
// good
const store = createStore(reducers, initalState, composeEnhancers(
applyAppStateListener(),
applyMiddleware(sagaMiddleware)
));
// bad
const store = createStore(reducers, initalState, composeEnhancers(
applyMiddleware(sagaMiddleware),
applyAppStateListener()
));
```
Then you can define a saga like:
```javascript
import { takeLatest } from 'redux-saga/effects';
import { FOREGROUND, BACKGROUND, INACTIVE } from 'redux-enhancer-react-native-appstate';
function* appHasComeBackToForeground() {
// app has come back to foreground!
}
function* watchForAppBackToForeground() {
yield takeLatest(
FOREGROUND,
catchApiExceptions(appHasComeBackToForeground),
);
}
```
## Contributing
See [our contributing guidelines](https://bamlab.github.io/open-source/#contributing)