redux-saga-rn-alert

Ever wanted to use Alert.alert() with callbacks within a side-effect or generator function? This library help along!

It allows us to show a typical alert-modal while we can pass callbacks
for the user-action the redux-saga-way with yield put() or yield call().
Other side-effects like fork or spawn aren't implemented yet. Feel
free to contribute if you need it!

Changelog

V 1.2.6

Nested alerts will be prevented from now on, as soon as one re-enables them calling preventNestedAlerts(false).

Let's say in your code gets another alert() called while the first one is still open. This could result in unwanted and strage effects.
Since 1.2.6 we will prevent that a subsequent call to alert() will be appear if another alert is still open.

Installation

``bash
yarn add redux-saga-rn-alert
`
or
`bash
npm install redux-saga-rn-alert --save
`

Setup

In the root reducer add the alert-reducer. For instance:

reducer.js:

`javascript
import { alertReducer } from 'redux-saga-rn-alert';

const appReducer = combineReducers({
appStates,
routes,
...
alertReducer
});
`

In the root saga spawn the channel watcher:

saga.js

`javascript

import { watchAlertChannel } from 'redux-saga-rn-alert';

export default function * rootSaga() {
yield [
// ... all your sagas here
spawn(watchAlertChannel),
];
}
`

Usage

The alert-function has the same signature as the official alert-method
of react-native.

`javascript
static alert(title, message?, buttons?, options?) {}
`

Example 1

Show an alert with 2 Buttons and put some actions:

`javascript
const buttons = [
{text: 'Cancel', style:'cancel', put: {type: ACTIONS.S_CANCEL_EDIT}},
{text: 'OK', style:'default',call: RouterActions.pop},
]

yield call(alert, 'Error', 'Foobar message', buttons)
`

In this example an alert-box will be shown with two buttons "Cancel"
and "ok". If the user taps on "cancel", a yield put() will be
executed with a user-defined action, while "ok" raises a yield call
to the pop-method of the Router from react-native-router-flux.

Instead of executing a "plain" function like pop() without any arguments, you can also call a method passing arguments:

Example 2

`javascript
const buttons = [
{text: 'Cancel', style:'cancel', put: {type: ACTIONS.S_CANCEL_EDIT}},
{text: 'OK', style:'default', call: {method: myMethod, args: {name: '', street: ''}},
]

yield call(alert, 'Error', 'Happy to call alert with callbacks within a generator function', buttons)
`

Example 3

It is also allowed to pass an array of several side effects:

`javascript
const buttons = [
{text: 'Cancel', style:'cancel', actions:
[
{put: {type: ACTIONS.S_CANCEL_EDIT}},
{call: RouterActions.pop},
],
},
{text: 'OK', style:'default', call: RouterActions.pop},
]

yield call(alert, 'Error', 'Foobar message', buttons)
``

In this example, the callback-function of the Cancel-button will
first "yield put" an action to our reducers and then call the pop()-method
of the router.

IOS Style Support:

iOS

On iOS you can specify any number of buttons. Each button can optionally specify a style, which is one of
* default
* cancel
* destructive

Contribution:

Contributors are welcome! Feel free to submit pull requests or open discussions.