Kivy with-redux

やること
• 状態遷移に限ったReduxの解説
• Kivyで使う。使えるのか？

なんでReduxか
• UIは増え続ける状態との戦い
• ﬂux, Rx, cycle.js…
• Kivyも例外ではない
• ViewライブラリとしてのKivyはjsxの代わりにな
るか？

Redux
• 流行りのFluxの実装
• 状態遷移のロジックが副作用を持たないのが特
徴

Redux
• まずStateを定義する。
state = { 
'todos': [] 
}

Redux
• 次にStateへのアクションを定義する。
ADD_TODO = 'ADD_TODO' 
COMPLETE_TODO = 'COMPLETE_TODO' 
def add_todo(text): 
return { 
'type': ADD_TODO, 
'text': text 
} 
 
def complete_todo(index): 
return { 
'type': COMPLETE_TODO, 
'index': index 
}

Redux
• 最後に前回の状態とアクションを引数に取って 
新しい状態を返す関数を実装する。 
 
def todo_reducer(action, state=None): 
type_ = action.get('type') 
if type_ == ADD_TODO: 
state['todos'].append(action['text']) 
elif type_ == COMPLETE_TODO: 
state['todos'].pop(action['index']) 
 
return state

Redux
newState = reducer(currentState, action)
• Reduce関数
def add(a, b): 
return a + b 
reduce(add, [1, 2, 3]) is add(add(1, 2), 3)

Store
• 状態を保持する。
• 呼び出されたら状態をreducerで遷移させる。
• 遷移させたらListenerに通知する。

ObjectProperty
• 変更するたびに関係者に更新命令を送る。
• .kvで書いてる部分も自動で更新される。

ObjectProperty
class TodoWidget(Widget): 
todos = ListProperty([]) 
# todosが更新されるたびに呼ばれる 
def on_todos(self, instance, value): 
pass

# 状態の更新を見張る。
self.todos.subscribe(self.update_todo) 
 
def update_todo(self): 
self.todos = self.state.state['todos']

残りは.kvで
.kv 
<TodoWidget>
id: todos
TodoLayout: 
todos: root.todos 
class TodoLayout(StackLayout): 
todos = ListProperty([]) 
 
def on_todos(self, instance, value): 
self.clear_widgets() 
for idx, text in enumerate(value): 
button = TodoButton(text=text) 
self.add_widget(button)
• StackLayoutにtodosを渡す。 
→todosの並びが表示される。

まとめ
• .kvのデータバインドの機構は 
ﬂux系データフローの支援に使える。(たぶん)
• Pythonのコードが減らせる。
https://github.com/fumiya-kubota/kivy-redux

Kivy with-redux

More Related Content

Kivy with-redux