React + Reduxに通知を追加する方法まとめ

前書き

サービス、アプリに通知機能をつければ、サービスとしておしゃれですし
ユーザーも気持ちいいですよね。
というわけで、React + Reduxのサービスに通知機能をつけてみました。

React + Reduxで色々とライブラリがあり、色々試してみました。
その中で、デザイン、導入の簡単さ、そしてデモのおしゃれさの中で
今回、導入に選んだのは、reapopです。
簡単に導入ができたので、今回は導入方法を紹介します。

Demo: reapop

reapopインストール

npmまたはyarnでインストールします。

$ npm install reapop
$ yarn add reapop

導入手順

indexにreapopを追加

一番ルートのjsx(例: appのindex.jsxなど)にNotificationsSystemを追加

// import
import NotificationsSystem from 'reapop';
import theme from 'reapop-theme-wybo';

...

// render
<div>
  <NotificationsSystem theme={theme} />
</div>

reducerにreapopを追加

reducerのindex(combineResucersの中)にnotificationsを追加

// import
import { reducer as notificationsReducer } from 'reapop';

...

combineReducers({
  ...
  notifications: notificationsReducer()
})

導入手順は以上になります。

使い方

Actionsの中で、アクションを作成します。
notifyをimportして、dispatchの中で動かすと通知バーが表示されます。

// actions
// import
import { addNotification as notify } from 'reapop';

...

return (dispatch) => {
  dispatch(notify({
    title: 'タイトル',
    message: 'メッセージ',
    status: 'info',
  }));
};

後書き

簡単になりましたが、React + Reduxで通知を出す方法をまとめてみました。
Actionsに一つ、通知アクションを作ってしまえばどこからでも呼べますね。