Successfully reported this slideshow.
Your SlideShare is downloading. ×

Kivy with-redux

Ad

Kivy with Redux
Fumiya Kubota

Ad

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

Ad

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

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 15 Ad
1 of 15 Ad
Advertisement

More Related Content

Advertisement

Kivy with-redux

  1. 1. Kivy with Redux Fumiya Kubota
  2. 2. やること • 状態遷移に限ったReduxの解説 • Kivyで使う。使えるのか?
  3. 3. なんでReduxか • UIは増え続ける状態との戦い • flux, Rx, cycle.js… • Kivyも例外ではない • ViewライブラリとしてのKivyはjsxの代わりにな るか?
  4. 4. Redux • 流行りのFluxの実装 • 状態遷移のロジックが副作用を持たないのが特 徴
  5. 5. Redux • まずStateを定義する。 state = {
 'todos': []
 }

  6. 6. 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
 }
  7. 7. 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

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

  9. 9. Store • 状態を保持する。 • 呼び出されたら状態をreducerで遷移させる。 • 遷移させたらListenerに通知する。
  10. 10. Kivy • デモ
  11. 11. ObjectProperty • 変更するたびに関係者に更新命令を送る。 • .kvで書いてる部分も自動で更新される。
  12. 12. ObjectProperty class TodoWidget(Widget):
 todos = ListProperty([])
 # todosが更新されるたびに呼ばれる
 def on_todos(self, instance, value):
 pass
  13. 13. # 状態の更新を見張る。 self.todos.subscribe(self.update_todo)
 
 def update_todo(self):
 self.todos = self.state.state['todos']
  14. 14. 残りは.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の並びが表示される。
  15. 15. まとめ • .kvのデータバインドの機構は
 flux系データフローの支援に使える。(たぶん) • Pythonのコードが減らせる。 https://github.com/fumiya-kubota/kivy-redux

×