Redux in Production

Transcript

1. JS Night Redux in Production #dcubeio
2. github.com/sotayamashita twitter.com/sota0805 blog.sotayamashita.com 山下颯太 ソフトウェアエンジニア 株式会社サイバーエージェント 株式会社シロク
3. 今日話すこと • Redux ͱ͸ʁ • Flux ͱ͸ʁ はじめに Growth Push • Growth Pushͱ͸ʁ • എܠ • վमલͷߏ੒ • վमޙͷߏ੒ • Switch ͩΒ͚ͷ Reducer • ࠶ར༻Մೳͳ Component
4. Flux とは？
5. Action Dispatcher Store View Flux ͱ͸ʁ ਤ A cartoon intro to Flux by Lin Clark
6. Reduxとは？
7. –Dan Abramov “I didn't actually intend Redux to become a popular Flux library—I wrote it as I was working on my ReactEurope talk on hot reloading with time travel.” Reduxͱ͸ʁ Why use Redux over Facebook Flux?
8. Reduxͱ͸ʁ Store 内の state とそのロジックを分離 todos: [“eat”, “sleep”] todos: [“”, “”] addTodo: (todo) => {} addTodo: (todo) => {} todos: [“eat”, “sleep”] addTodo: (todo) => {} todos: [“eat”, “sleep”] addTodo: (todo) => {} ߋ৽ 更新 更新 Before After ਤ A cartoon intro to Redux by Lin Clark
9. Reduxͱ͸ʁ State を action から直接上書きしない Before Action 1 Action2 Action 3 state ਤ A cartoon intro to Redux by Lin Clark
10. Reduxͱ͸ʁ State を action から直接上書きしない After Action 1 Action2 Action 3 state 1 state 2 state 3 ਤ A cartoon intro to Redux by Lin Clark
11. Reduxͱ͸ʁ 階層になっている state からなる 1つの大きな state Before dispatcher store store store log ਤ A cartoon intro to Redux by Lin Clark
12. Reduxͱ͸ʁ ਤ A cartoon intro to Redux by Lin Clark 階層になっている state からなる 1つの大きな state After dispatcher reducer reducer reducer log reducer reducer reducer reducer reducer
13. Growth Push とは？
14. Growth Push ͱ͸ʁ http://growthpush.com/
15. վमલͷߏ੒ • クライアントサイド MVC ライブラリ • テンプレートエンジン • Alt JavaScript • フレームワーク
16. վमલͷߏ੒ • クライアントサイド MVC ライブラリ • テンプレートエンジン • Alt JavaScript • フレームワーク この部分を変更
17. վमޙͷߏ੒ • フレームワーク • フロント SPA
18. Switch だらけの Reducer
19. tree . └── reducers ├── index.js ├── application.js ├── notification.js ├── client.js ├── event.js └── tag.js Switch ͩΒ͚ͷ Reducer
20. http://redux.js.org/docs/basics/Reducers.html Switch ͩΒ͚ͷ Reducer 1 import * as ActionTypes from ' ../actions/todoApp'; 2 3 function todoApp(state = initialState, action) { 4 switch (action.type) { 5 case ActionTypes.SET_VISIBILITY_FILTER: 6 return { 7 ...state, 8 visibilityFilter: action.filter 9 }; 10 default: 11 return state 12 } 13 }
21. https://github.com/acdlite/redux-actions Switch ͩΒ͚ͷ Reducer 1 const todoApp = handleActions({ 2 SET_VISIBILITY_FILTER: (state, action) => ({ 3 visibilityFilter: action.filter 4 }), 5 }), initialState );
22. Before After Switch ͩΒ͚ͷ Reducer 1 import * as ActionTypes from ' ../actions/todoApp'; 2 3 function todoApp(state = initialState, action) { 4 switch (action.type) { 5 case ActionTypes.SET_VISIBILITY_FILTER: 6 return { 7 ...state, 8 visibilityFilter: action.filter 9 }; 10 default: 11 return state 12 } 13 } 1 const todoApp = handleActions({ 2 SET_VISIBILITY_FILTER: (state, action) => ({ 3 visibilityFilter: action.filter 4 }), 5 }), initialState );
23. 再利用可能なコンポーネント
24. ࠶ར༻Մೳͳίϯϙʔωϯτ • Container Components • Presentational Components
25. ࠶ར༻Մೳͳίϯϙʔωϯτ Container Presentational Container と Presentational の関係性 State Presentational Presentational Presentational
26. ࠶ར༻Մೳͳίϯϙʔωϯτ Container Presentational Container と Presentational の関係性 Store Presentational Presentational Presentational
27. ࠶ར༻Մೳͳίϯϙʔωϯτ Container Presentational Container と Presentational の関係性 Store Presentational Presentational Presentational ࠶ར༻͢Δͱ͜
28. ࠶ར༻Մೳͳίϯϙʔωϯτ Container Presentational Container と Presentational の関係性 State Presentational Presentational Presentational
29. ࠶ར༻Մೳͳίϯϙʔωϯτ Container Components Presentational and Container Components • Redux であれば connect() を使用してStore をもらうところ • スタイルをもたない傾向にある • 余計な DOM を含まない傾向にある • 例えば、 ユーザーページ、ログインページ
30. ࠶ར༻Մೳͳίϯϙʔωϯτ Container Presentational Container と Presentational の関係性 Store Presentational Presentational Presentational
31. ࠶ར༻Մೳͳίϯϙʔωϯτ Presentational Components Presentational and Container Components • functional component で実装できる傾向がある • スタイルをもちます • 実際の DOM を含みます • 例えば、 リスト、モーダル
32. ࠶ར༻Մೳͳίϯϙʔωϯτ Presentational and Container Components 1 const TodoList = ({ todos }) => ( 2 <ul> 3 {todos.map(todo => 4 <Todo 5 key={todo.id} 6 { ...todo} 7 /> 8 )} 9 </ul> 10 ); 1 class todoPage extends React.Component { 2 render() { 3 return ( 4 <div> 5 <TodoList todos={this.props.todos} /> 6 </div> 7 ) 8 } 9 }
33. ࠶ར༻Մೳͳίϯϙʔωϯτ Container Presentational Store Presentational Presentational Presentational
34. バケツリレー？？？
35. ࠶ར༻Մೳͳίϯϙʔωϯτ Container Store Container Container Container Container
36. ࠶ར༻Մೳͳίϯϙʔωϯτ 再利用可能とは？
37. ࠶ར༻Մೳͳίϯϙʔωϯτ https://github.com/sotayamashita/curator
38. 最後に
39. ࠷ޙʹ • ドキュメントが充実してる • 日本語だったら @kuy さんの Qiita にある記事とか • サンプルプロジェクトがたくさん • コミュニティが充実してる • サンプルプロジェクト作ってみた（全然間に合わなかった） • https://github.com/sotayamashita/curator
40. ご清聴ありがとうございました