Firebaseへのデータ送信前後でメッセージを表示する (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

前回の記事で、Firebaseへの通信を行う前にADD_TODO_REQUEST、通信完了時にADD_TODO_SUCCESS、エラー発生時にADD_TODO_ERROR actionをそれぞれdispatchしました。今回はそれぞれに対するreducerと画面表示を実装します。それぞれのactionに対して、メッセージを画面に表示するようにします。

reducerの実装

始めに、reducerのtodosを変更します。

src/reducers/todos.js

const todos = (state = {}, action) => {  // #1
  switch (action.type) {
    case 'ADD_TODO_REQUEST':
      return {...state, notice: 'データを送信中'}  // #2
    case 'ADD_TODO_SUCCESS':
      return {...state, notice: '送信完了しました'}  // #2
    case 'ADD_TODO_ERROR' :
      return {...state, notice: 'エラーが発生しました'}  // #2
    // case 'ADD_TODO': は削除  // #3
    // case 'TOGGLE_TODO': は次回変更
    default:
      return state
  }
}

// 後略

初期値を、空の配列から空のオブジェクトに変更します(#1)。
noticeに表示したい文言をそれぞれセットします(#2)。
case ‘ADD_TODO’ はもう使用しないので削除します(#3)。

表示用コンポーネントの追加

次に、noticeを画面に表示します。表示用のコンポーネントをAppの直下に追加します。

src/components/App.js

// 前略
import NoticeForTodo from './NoticeForTodo'  // 追加

const App = () => (
  <div>
    <AddTodo />
    <NoticeForTodo />  // 追加
    <VisibleTodoList />
    <Footer />
  </div>
)

// 後略

表示用コンポーネントを実装します。

src/components/NoticeForTodo.js(新規ファイル)

import React from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'

let NoticeForTodo = ({ notice }) => {
  if (! notice) {
    return null;
  }
  return (
    <div>
      {notice}
    </div>
  )
}

NoticeForTodo.propTypes = {
  notice: PropTypes.string
}

const mapStateToProps = state => {
  return {
    notice: state.todos.notice
  }
}

NoticeForTodo = connect(
  mapStateToProps
)(NoticeForTodo)

export default NoticeForTodo;