https://github.com/tsugitta/redux-observable-rn-alert
Support side effects of `Alert.alert()` with redux-observable
https://github.com/tsugitta/redux-observable-rn-alert
react-native redux redux-observable
Last synced: 6 months ago
JSON representation
Support side effects of `Alert.alert()` with redux-observable
- Host: GitHub
- URL: https://github.com/tsugitta/redux-observable-rn-alert
- Owner: tsugitta
- License: mit
- Created: 2018-03-19T08:11:15.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-02-17T11:23:51.000Z (over 7 years ago)
- Last Synced: 2025-10-11T11:51:37.882Z (9 months ago)
- Topics: react-native, redux, redux-observable
- Language: TypeScript
- Size: 154 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# redux-observable-rn-alert
[](https://www.npmjs.com/package/redux-observable-rn-alert)
[](https://travis-ci.org/tsugitta/redux-observable-rn-alert)
[](https://coveralls.io/github/tsugitta/redux-observable-rn-alert?branch=master)
This library offers a way to use `Alert.alert()` with a side-effect in a react-native app using redux & redux-observable.
## Supported redux-observable versions
| redux-observable version | Supporting redux-observable-rn-alert version |
| ------------------------ | -------------------------------------------- |
| < 1.0.0 | 0.1.3 |
| >= 1.0.0 | >= 0.1.4 |
## Installation
```bash
yarn add redux-observable-rn-alert
```
or
```bash
npm i redux-observable-rn-alert --save
```
## Setup
in the root epic, add `alertEpic`.
```js
import { combineEpics } from 'redux-observable'
import { alertEpic } from 'redux-observable-rn-alert'
export const rootEpic = combineEpics(
// ..
alertEpic,
)
```
## Usage
You can show an alert by calling the action. Also, you can pass actions that are called when buttons are pressed.
```js
import { AlertActions } from 'redux-observable-rn-alert'
dispatch(
AlertActions.alert({
title: 'foo',
message: 'bar',
buttons: [
{
text: 'baz',
onPressAction: { type: 'BAZ', payload: { qux: 'qux' } },
},
],
options: {
// below are only for Android
cancelable: true,
onDismissAction: { type: 'QUX', payload: { qux: 'qux' } },
},
type: '',
}),
)
```
## Interface
Basically, the payload attributes of `AlertActions.alert` follow the attributes of `Alert.alert()`.
below are the interface and differences from the attributes of `Alert.alert()`.
| NAME | TYPE | REQUIRED | DIFFERENCE |
| ------- | ------------------------------------------------------------------ | -------- | ----------------------------------------------------------- |
| title | `string` | Yes | Nothing |
| message | `string` | No | Nothing |
| buttons | `Array<{ text?: string, onPressAction?: Action, style?: string }>` | No | onPressAction corresponds to onPress of `Alert.alert()` |
| options | `{ cancelable?: boolean, onDismissAction?: Action }` | No | onDismissAction corresponds to onDismiss of `Alert.alert()` |
| type | `string` | No | Nothing |