redux-saga-timer v0.1.0

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!

Installation

yarn add redux-saga-rn-alert

or

npm install redux-saga-rn-alert --save

Setup

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

reducer.js:

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

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

In the root saga spawn the channel watcher:

saga.js

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.

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

Example 1

Show an alert with 2 Buttons and put some actions:

  const buttons = [
      {text: 'Cancel', put: {type: ACTIONS.S_CANCEL_EDIT}},
      {text: 'OK', 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

  const buttons = [
      {text: 'Cancel', put: {type: ACTIONS.S_CANCEL_EDIT}},
      {text: 'OK', 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:

  const buttons = [
      {text: 'Cancel', actions:
        [
            {put: {type: ACTIONS.S_CANCEL_EDIT}},
            {call: RouterActions.pop},
        ],
      },
      {text: 'OK', 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.

Contribution:

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