React

Redux

  • Action
    • Actionは、Store内の値を変更するために発行される処理。
    • ActionCreatorとの違い
  • Reducer
  • Store
  • Connect
  • APIの呼び出し
  • Provider
  • React.createContextとReact.useContext
  • Actionの反応を確認する
  • Actionとredux-sagaを繋げる
  • redux-sagaでAPIが引っ張ってこれているか確認する
  • APIをreducerで受け取る
  • reducerでStoreのStateを更新する
  • 更新後のStateの値をデバックで確認する
  • Viewで表示させる

Hooks

  • useState
  • useEffect
  • useContext
  • useReducerl
  • localStorage

ContextAPI

  • Viewでcomponentの該当箇所がクリックされる
  • contexts内の該当の関数が実行され、Stateが更新される
    • redux-sagaでAPI通信する場合は、contexts内が呼び出される前に、midilewareでAPI通信が行われなければならない。
    • API通信で得た値を、contexts内でpropsで渡してあげるのか??
    • Actionにどういう記述を書けば、クリック時にアクションが発火し、redux-sagaに繋げられるのかを解決する
    • store.dispacth()されたときに、redux-sagaが動くようにする??
  • View側で表示される

Middleware

  • redux-saga
  • redux-thunk

reduxで、action→reducerの間にmiddlewareを挟み、共通処理を実行させることができる。
下記の順番。

  • action
  • middleware(redux-sagaやredux-thunk)
  • reducer

ToDoアプリでやりたいこと

  • Reactだけで作る
  • Reduxを使って作る
  • ReactHooksを使って作る
  • ContextAPIを使って作る
    • 上記のそれぞれで永続化できる??