Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Kivy with-redux

508 views

Published on

Kivy with redux

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×