はじめに
『React』 +『Redux』 + 『Firebase』でLINE風のChat機能を作ろう！シリーズですが、前々回と前回で【準備編】、【Component編】の記事を書きました。今回は最後の記事となる【状態管理編】です！
今回は
の4点について簡単にまとめます。
前回までの投稿とはディレクトリの配置が大きく変わっております。
Githubに完成したコードを載せますので、詳細を知りたい方はそちらをご覧ください。
何か疑問点や修正箇所がございましたら、ご指摘をよろしくお願い致します。
【準備編】
『React』 +『Redux』 + 『Firebase』でLINE風のChat機能を作ろう！ 【準備編】
【Component編】
『React』 +『Redux』 + 『Firebase』でLINE風のChat機能を作ろう！ 【Component編】
redux-actions
redux-actionsとは、reduxでの状態管理のガイドライン(Flux Standard Action)を引き、その実装を助けてくれるライブラリです。
actionの記述を楽にする『createAction(s)』
reducerの記述を楽にする『handleAction(s)』
同じreducerの処理をする際に、複数のactionをまとめる『combineActions』
の３つがあります。
また、以下の３つのゴールを持って設計されました。
- Human-friendly. (人に優しい)
- Useful. (役に立つ)
- Simple. (シンプル)
- Human-friendly. FSA actions should be easy to read and write by humans.
- Useful. FSA actions should enable the creation of useful tools and abstractions.
- Simple. FSA should be simple, straightforward, and flexible in its design.
それでは実際に、redux-actionsを用いて実装を進めていきましょう！
createAction(s)
createActionsを使って、まとめてアクション(クリエイター)を生成します。
import {createActions} from 'redux-actions';
import {firebaseDb} from '../../firebase';
const messagesRef = firebaseDb.ref('messages');
const {messages} = createActions({
messages: {
submit(value, image) {
const payload = value;
if (payload === '') {
alert('メッセージを入力してください');
return false;
}
messagesRef.push({
image: image,
text: payload,
});
return payload;
},
change(value) {
const payload = value;
return payload;
},
},
});
export {messages};
『submit』は入力されたメッセージをfirebaseに送信する際に生成されるactionで、『change』はtextareaに文字が入力される度に生成されるactionです。
またmessagesRef.pushにてfirebaseにデータを送信しています。
handleAction(s)
handleActionsを使って、まとめてreducerを定義しましょう！
import {handleActions} from 'redux-actions';
import {actions} from '../actions';
import {repos} from '../repos';
import {initialState} from '../store/initialState';
const messages = handleActions(
{
[`${actions.messages.submit}`](state, action) {
return repos.messages.addMessage(state, action.payload);
},
[`${actions.messages.change}`](state, action) {
return repos.messages.changeText(state, action.payload);
},
},
initialState
);
export {messages};
このファイルの中では状態遷移に関する記述はせず、以下のrepos/messages.jsにて『immer』を用いて状態遷移を行うようにしています。
immer
immerに関しては、以下の説明がわかりやすかったので、そのまま引用させていただきます。
immerは現在のstateを渡すと下書き状態であるdraftが渡されそれに対して変更を行うと、変更が反映された新しいオブジェウトを返却してくれます。変更は通常のJSオブジェクトと同様に行うことができるので、非常にとっつきやすいと思います。
import produce from 'immer';
export const addMessage = (state, payload) => {
const newState = produce(state, draftState => {
draftState.value = '';
draftState.text = payload;
});
return newState;
};
export const changeText = (state, payload) => {
const newState = produce(state, draftState => {
draftState.value = payload;
});
return newState;
};
以上で、『redux-actions』と『immer』を用いて状態遷移を行う部分のプログラムを実装しました。
説明を省いている箇所が多々ありますので、詳細に関してはGithubをご覧いただければと思います。
今後の勉強方針
- 『React Hooks』に関して理解を深める
- 『AWS 認定ソリューションアーキテクト – アソシエイト』の資格を取る