みかづきメモ

学習したことのメモとか、日記とか、備忘録。

React Native + Redux + TypeScript でモバイル開発 -構成-

前回の続き。
今回は、 Redux を、おおまかに学んでみる。


前回

mikazuki.hatenablog.jp

Redux は、 MVC などのデザインパターンの1つである、 Flux のフレームワークの1つ。
他にも、 flummox とかがあるらしいけど、いま流行ってるのが Redux らしい。

MVC などと同様、役割を分けて、メンテナンスをしやすくする。
とりあえず、合ってるかわからないけど、それぞれの役割を、
公式ドキュメントのサンプルに合わせてやっていきます。
間違ってたら、 Twitter なりで突いてくれれば。

Example: Todo List | Redux

Actions

addTodo (Todo の追加), completeTodo (Todo の完了) のように、
ユーザーの操作によって発生するイベントを定義する。
Twitter クライアントで言うと、 API 叩くのがここ。

Reducers

Actions で発生したイベントを処理し、状態更新したりして、それを返す。
状態は返すだけで、持たない。持つのは Store
Todo リストの、完了済みか、そうじゃないかを計算している。
ネットを介するアプリの待機中の Loading... の表示状態とかも、ここで計算する。

function update(state, action) {
  switch(action.type) {
    // ツイート送信開始
    case REQUEST:
      return Object.assign({}, state, {
        isSending: true
      });
    
    // ツイート送信完了
    case RECEIVED:
      return Object.assign({}, state, {
        isSending: false
      });
      
    default:
      return state;
  }
}


Store

状態を持つ。
createStore などで Reducers から作られるから、直接は見かけないっぽい。

Containers

React の Component に該当する部分。
Components とは違って、 Redux と関係があるもの。
Components へと、 Props で渡していく。
State(Store) の持ち主?

Components

Containers と同じく、 React の Component に該当する部分。
ただし、 Containers とは違って、 Redux とは関係がないもの。
つまり、

import { connect } from 'react-redux'

だとか、 Actions だとかをインポートしていないこと。

関係性は、

EntryPoint
 |
 Containers
  |
  Components

みたいな感じ。 Prop だけ持って、 State は持たない。


という感じ。
他にも、 Middleware とかもあるみたいだけど、今回は割愛。
おわり。