reactの勉強1 -reducerを使って入力欄をつくる- #React

はじめに

reactの勉強をするので、記録を残す。
今回は以下の「12.イベントの状態遷移を管理する」を見ながら勉強している。
https://www.udemy.com/share/101tSGB0cYcFZVQnw=/

覚えておくことリスト

State…状態
Store…Stateの保管場所
Action…状態の更新を指示する
Dispatch…ActionをStoreに送る
Reducer…Actionの指示に応じてStateをどうこうする

やりたいこと

幽霊屋敷の生存者リストを作成する。
幽霊屋敷の生存者を追加したり、削除したりいろいろ。

やったこと

src/reducers/index.js

const events = (state = [], action) =>{
  switch (action.type) {
    case 'ADD_PEOPLE':
      const people = { name: action.name, body: action.body }
      const length = state.length
      const id = length == 0 ? 1 : state[length - 1].id + 1
      return [...state, { id, ...people }]
    case 'LEAVE_PEOPLE':
      return state
    case 'LEAVE_ALL_PEOPLE':
      return []
    default:
      return state
  }
}

eventsというコンポーネントを作成する。
このコンポーネントでは幽霊屋敷の訪問者の状態を

追加する（case 'ADD_PEOPLE'）
消える（case 'LEAVE_PEOPLE'）
すべて消える（case 'LEAVE_ALL_PEOPLE'）
現状（default）

という四種類のタイプで定義する。

src/components/App.js

const App = () => {
  const [state, dispatch] = useReducer(reducer, [])
  const [name, setName] = useState('')
  const [body, setBody] = useState('')

  const addPeople = e =>{
    e.preventDefault()
    dispatch({
      type: 'ADD_PEOPLE',
      name,
      body
    })
    setName('')
    setBody('')
  }

  return (
    <div className="container-fluid">
      <h4>幽霊屋敷の生存者作成</h4>
      <form>
        <div className="form-group">
          <label htmlFor="formPeopleName">訪問者名</label>
          <input className="form-control"
                 id="formPeopleName"
                 value={name} 
                 onChange={e =>
                 setName(e.target.value)} />
        </div>

        <div className="form-group">
          <label htmlFor="formPeopleBody">訪問者のプロフィール</label>
          <input className="form-control"
                 id="formPeopleBody"
                 value={body}
                 onChange={e =>
                 setBody(e.target.value)} />
        </div>

        <button className="btn btn-primary" onClick={addPeople}>上記の人物が屋敷に訪れる</button>
        <button className="btn btn-danger">すべての人間が姿を消す</button>
      </form>

      <h4>生存者一覧</h4>
      <table className="table table-hover">
        <thead>
          <tr>
            <th>ID</th>
            <th>生存者名</th>
            <th>プロフィール</th>
          </tr>
        </thead>
      </table>
    </div>
  )
}

addPeopleというコンポーネントを定義し、ここでsrc/reducers/index.jsで定義した訪問者の追加（ADD_PEOPLE）を利用して入力欄（人物名/人物のプロフィール）に追加したい訪問者の情報を入力する部分まで定義する。

※ ここまでの段階では追加ボタンをクリックしても生存者一覧に表示することはできないが、実際に入力した内容が渡っているかどうか確認したい場合はaddPeople内でconsole.logを使って確認できる。

const addPeople = e =>{
    e.preventDefault()
    dispatch({
      type: 'ADD_PEOPLE',
      name,
      body
    })
    setName('')
    setBody('')

    console.log({ name, body })
  }

正直reactのことはよくわかっていない。このStateやらDispatchやらもなんとなくの感覚でつかってみたがやっぱりよくわかっていない。この先どうなってしまうのか