読者です 読者をやめる 読者になる 読者になる

redux-micro-actionsを作った

Advent Calendar 2016 Redux JavaScript 作った

qiita.com これの17日目です。

なにをつくったか

middlewareで何かのactionに対して複数の小さなaction(この記事ではmicro actionと呼ぶことにします)をdispatchするようなコードで、 micro action単体がdispatchされてしまうとデータの整合性が崩れてしまうような場合があると思います。

今回作ったのは、それを防ぐためのものです。

できたもの

github.com

当初は静的型チェックを用いてやるつもりでしたが、時間が足りなかったため、 micro actionかどうかをactionのmetaプロパティーに入れてエラーは実行時に出すという方法になってしまいました。

つかいかた

使うのは以下の3つの関数です。

  • micro: actionCreator => microActionCreator
    actionCreatorがmicro actionを返すようにする
  • allowMicro: middleware => middleware'
    middleware内のstore.dispatchでmicro actionを許可する
  • denyMicro: option => storeEnhancer
    store.dispatchでmicro actionを禁止する
import {
  micro,
  allowMicro,
  denyMicro
} from 'redux-micro-actions'

const action1 = () => ({type: 'ACTION1'})
const action2 = micro(() => ({type: 'ACTION2'}))

const store = createStore(
  reducer,
  compose(
    applyMiddleware(
      middleware1,
      allowMicro(middlware2)
    ),
    denyMicro()
  )
)

こんな感じになります。

この例ではaction2がmicro actionになっているため、 micro actionのdispatchが許可されているmiddleware2内のstore.dispatch以外からdispatchするとエラーが出るようになっています。

さいご

いつかflowtypeとTypeScriptの型定義を追加できたらいいなとは思っていますが、 まだどちらも使ったことがないので結構後になると思います。

ありがとうございました。