前書き
サービス、アプリに通知機能をつければ、サービスとしておしゃれですし
ユーザーも気持ちいいですよね。
というわけで、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に一つ、通知アクションを作ってしまえばどこからでも呼べますね。