flowtype
redux

Flow & Redux で Reducer の実装パターンを考える

More than 1 year has passed since last update.


背景

段階的に片付けしていく、というFlowのコンセプトで、最も需要が高いのは、純粋なJSで済む状態管理、 とくに Redux の Reducer の部分であると考えられる。


実際のコード

とりあえずこうなるだろうというのを書いてみた。

/* @flow */

// constants
const INCREMENT = 'increment'
const ADD = 'add'

export const Actions = {
INCREMENT, ADD
}

// actions
export type IncrementAction = {
type: typeof Actions.INCREMENT
}

export type AddAction = {
type: typeof Actions.ADD,
payload: number
}

export type CounterAction = IncrementAction | AddAction

// reducer
type CounterState = { value: number }
export default (state: CounterState = { value: 0 }, action: CounterAction) => {
switch(action.type) {
case Actions.INCREMENT:
console.log(action.payload) //failed
return { value: state.value + 1 }
case Actions.ADD:
return { value: state.value + action.payload }
}
}

// action creator
export function increment(): IncrementAction {
return {type: Actions.INCREMENT}
}

export async function incrementAsync(): Promise<IncrementAction> {
return {type: Actions.INCREMENT}
}

export function add(n: number): AddAction {
return {type: Actions.ADD, payload: n}
}

switch 式の中の failed と書いてある部分が一番コケてほしい部分。INCREMENTにpayolad はない。で、ちゃんとコケてくれる。

ACTION名の生成にredux-actionsみたいな関数を挟んだりすると、うまくいかない。諦めた方がいい。


ファイルの分割

reducers/

counter/
index.js
actions.js
constants.js

人次第。なんか規約がほしい。constants.js は actions.js の中に移動しても良さそうだけど、reducer と actions の主従関係が、書いてる人次第だと思う。とりあえず外出した。

フラット派ならこっちだろうか。

actions/

counter-actions.js
reducers/
counter.js

Flowの推論機を壊さない範囲で綺麗にしたい。