![type TodoItem = {
value: string | null,
createdAt: Date
}
type Store = {
todos: {
items: TodoItem[],
inputValue: string | null,
},
user: {
id: number,
name: string,
registered: boolean
},
gui: {
modal: {
visible: boolean,
componentName: string
}
}
}
// 送信可能とする状態
const isPostEnabled =
todos.inputValue !== null &&
todos.inputValue !== '' &&
user.registered === true &&
gui.modal.visible === false](https://image.slidesharecdn.com/choreographyofstatemanagement-180424035129/85/-8-320.jpg)
![type TodoItem = {
value: string | null,
createdAt: Date
}
type Store = {
todos: {
items: TodoItem[],
inputValue: string | null,
},
user: {
id: number,
name: string,
registered: boolean
},
gui: {
modal: {
visible: boolean,
componentName: string
}
},
app: { // 下流 tree
isPostEnabled: boolean // 爆誕
}
}
// 送信可能とする状態
const isPostEnabled =
todos.inputValue !== null &&
todos.inputValue !== '' &&
user.registered === true &&
gui.modal.visible === false](https://image.slidesharecdn.com/choreographyofstatemanagement-180424035129/85/-16-320.jpg)
状态管理のコレオグラフィ
- 3. 先日 DeNA TechCon2018 という場で、状態管理関連の 発表をさせて頂きました。 サービス開発における フロントエンド?ドメイン駆动设计の実践
- 8. type TodoItem = { value: string | null, createdAt: Date } type Store = { todos: { items: TodoItem[], inputValue: string | null, }, user: { id: number, name: string, registered: boolean }, gui: { modal: { visible: boolean, componentName: string } } } // 送信可能とする状態 const isPostEnabled = todos.inputValue !== null && todos.inputValue !== '' && user.registered === true && gui.modal.visible === false
- 9. 辞めたいパターン
- 10. 3 tree を mapStateToProps connect で云々...
- 11. 3 tree を getState thunk で云々...
- 16. type TodoItem = { value: string | null, createdAt: Date } type Store = { todos: { items: TodoItem[], inputValue: string | null, }, user: { id: number, name: string, registered: boolean }, gui: { modal: { visible: boolean, componentName: string } }, app: { // 下流 tree isPostEnabled: boolean // 爆誕 } } // 送信可能とする状態 const isPostEnabled = todos.inputValue !== null && todos.inputValue !== '' && user.registered === true && gui.modal.visible === false
- 17. 书き込みは…
- 18. 関係者各位の Reducer で 変更に応じて… ????????
- 19. combineReducers してて 他所の State 参照出来ないので、 npm i redux-thunk しても？
- 20. combineReducers してて 他所の State 参照出来ないので、 npm i redux-thunk しても？ 理由は後述
- 21. ロジック?書き込みは どこで？
- 22. コレオグラフィで！
- 23. コレオグラフィ？ コレオグラフィー コレオグラフィー（英: Choreography） ?振付師（ダンス?バレエや舞踊などで使われる踊りの振り付けを行う職業） ?人文字 ※ wikipedia 调べ
- 26. todos user gui app app service (logic) 購読 購読 購読
- 27. app app service (logic) todos user gui 購読 購読 購読 foo 購読 bar 購読
- 28. A service ... ... ...... ... B service ... ... ...... ... app app service (logic) BA
- 31. 影響は tree 内に閉ざされ、 tree が保持する値として 自然なものに。
- 32. 必要なもの
- 33. redux-observable redux-saga async / await ( + subscriber )
- 36. ?設計パターンなので ライブラリ不問 ※ 特定のイベントが購読できる下地は必要 ※ thunk 単体だと购読できないので厳しい
- 38. ?Props 削減 で幸せ ?View のテストも当然楽に
- 39. イベント駆动の恩恵は大きい
- 40. Redux 使ってないって？
- 42. const todosStore = new TodosStore() const userStore = new UserStore() const guiStore = new GUIStore() const appStore = new AppStore(todosStore, userStore, guiStore) const fooStore = new fooStore(appStore) const barStore = new barStore(appStore) MobX にありがちな 共有カーネルパターンからの脱却
- 43. const todosStore = new TodosStore() const userStore = new UserStore() const guiStore = new GUIStore() const appStore = new AppStore() const fooStore = new fooStore() const barStore = new barStore() runAppService(appStore, todosStore, userStore, guiStore) runFooService(fooStore, appStore) runBarService(barStore, appStore) Store 各位の UnitTest が単純 = Store が純粋に
- 44. 例の如く、银の弾丸ではない。
- 45. ?他所の雑な dispatch は NG※ ?参照関係の doc化検討 (UML?) ?サービス層寄りの貧血症 ※ 属する tree の変更のみを許可する運用カバー