ゆずめも

メモ的なブログです。主に勉強した事について書いてます。

redux始めました

javascript

最近ちょっと時間ができたのでreact context api触ってみたり、MobX触ってみたりしてます。

しかし会社ではreact + reduxで作られているプロジェクトがあるので、ちょっと勉強しとくかって感じで勉強したメモ

ちなみに見てたのはreduxの公式 https://redux.js.org/

reduxパーツ

Action

Plain Javascript Objectで定義され、TypeとValueを持つ 説明が面倒なのでメモはredux公式に習ってるけど、基本的にはflux-standard-action等に従うべきだと思う

github.com

interface Action {
  type: string; // Action Type
  payload: any; // errorがtrueならErrorオブジェクト
  error: boolean;
  meta: any; // payloadとは別の追加情報などを設定する
}

Action Creators

Action CreatorsはActionを返すただの関数

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

facebook/fluxだとaddTodoWithDispatchのようにActionを作成しつつdispatchするが reduxのAction CreatorsはActionを返す

// wrong
addTodo() // => 内部でdispatch

// good
dispatch(addTodo(text))

dispatchしてActionを実行するものをBound Action Creatorというらしい

const boundAddTodo = text => dispatch(addTodo(text))

reduxのbindActionCreatorsを使うと上のやつが簡単に作れるっぽい

const actions = bindActionCreators(actionCreators, dispatch)

Reducers

Storeに渡されたアクションによってstateがどのように変化するのかを定義する

雑にまとめると(prevState, action) => newStateこんな感じでstateとactionを渡すと、新しいstateを返すやつ

reducerは副作用が無いようにしなければならない

function todoApp(state = initialState, action) {
  switch (action.type) {
  case HOGE:
    return Object.assign({}, state, {hoge: true})
  case FUGA:
    return Object.assign()
  default:
    return state

reducerが大きくなってくると分割して、reduxのcombineReducersを使用してreducerをまとめる

Store

アプリケーションのstateを持ってる
reduxの思想的に「Single source of truth」なのでStoreは１つ。createStoreの時点でreducerを引数に取る

ReduxのStoreは以下の3つのメソッドを持つ

  • getState
    • Storeが持つstateを取得する
  • dispatch
    • actionを一つ引数に取り、内部でreducerによってstateが変更された時に呼ばれる
  • subscribe
    • stateが変更された時にこのコールバックが呼ばれる

まとめ

とりあえずactionとか完全に従って置いた方がいいんじゃないかなーくらいに思っただけで、特に根拠がないので後々裏付けしたいとは思ってる

あとまだreact-reduxについては全く触ってないので明日とかにちょこちょこ見ていく予定