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

Reduxでstateをサーバー側に置く

Advent Calendar 2016 Redux JavaScript

qiita.com これの5日目の記事です。

概要

+--------+          +-------+                  +--------+
|        |  Action  |       |  Server Action   |        |
|        |--------->|       |----------------->|        |
| Client |          | Redux |                  | Server |
| (View) |  State   |       |  Patch / Action  |        |
|        |<---------|       |<-----------------|        |
|        |          |       |                  |        |
+--------+          +-------+                  +--------+

これをやる。
実例としてxeejp/theme-boilerplateなどがある。

使うもの

  • jsondiffpatchとclone
  • サーバー側にAction送るやつ (redux-sagaやredux-logicなどで)
  • サーバー側でパッチ発行するやつ

できた(Reducerのみ)

gistfc322c1c1dc2d7877fbc06ef37f6262f
解説する必要もないくらい*1、やっていることは単純ですが一応。
'INITIAL_STATE'actionで初期状態を受け取って、後はひたすら'PATCH'actionで送られてきたパッチを適用する。
パッチを適用する前にcloneしないと、前stateが直接書き換えられてしまうので気をつける必要がある。*2
あとは、このreducerをcombineReducersなりなんなりに渡すイメージ。(2016/12/7追記)

最後に

非常に短く、内容も薄い記事になってしまった。

*1:そもそも記事にする必要すらない

*2:Object.assignを使って浅いcloneをしていたときは、ひどい目にあった