ゆずめも

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

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については全く触ってないので明日とかにちょこちょこ見ていく予定

browsersyncを使ってみたら思った以上に便利だった

javascript

browsersync使ってますか？死ぬ程今更ですが、使ってみたら思ってた以上のことをしてくれた

browsersync.io

最初は更新してくれるだけだと思ってた

最初はファイルの変更検知してブラウザリロードしてくれるだけでしょと思ってたら、リロードしてくれる以上のことができた

何をしてくれたのか

  • 同じページ開いてるブラウザを全部リロード（１個だけだと思ってた）
  • 操作を同期してくれる

操作を同期してくれるとは

例えばBrowser Aでbutton要素をclickすると、Browser Bでも要素をclickしてくれる

使い方

適当にインストールする

yarn add -D browser-sync

あとはserverオプションでルートディレクトリを指定して、filesオプションで監視する対象のファイルパスを指定する

例えばpublicディレクトリをルートに、public以下が変更されたらブラウザを更新する

npx browser-sync start --server 'public' --files 'public/**/*'

これでファイルを変更するとブラウザが更新され、ブラウザ操作もそれぞれに反映してくれた🎉

reactのテンプレ作った

javascript

GWに予定が初日と最終日にしかなくて、いつも通り映画を見て過ごしているのですが
映画見てるだけだと手持ち無沙汰なのでreactでなんかやってみようと思ったけど、create-react-app使いたくなかったのでwebpackの設定とか入ってるテンプレ作った

github.com

やってることは最低限jsxとかをブラウザで動く形に変えるだけなので、flowとかtypescriptみたいな型も入って無くて、使う時に入れるようにしようかと思ってる。

まだ動かし方とか書いてないけど、更新しつつ、新しいcontext apiとかできたしそこらへん触っていく