>React/Redux @ Eight2016.9.5

http://8card.net/p/shuhei-aoyama

青山 修平 @Sansan

フロントエンド リードエンジニア

( 仮 )

入社当時・・・

containers/xxx.jscomponents/yyy.js

1k lines...1k lines...1k lines...

reducers/zzz.js??

??

?

• スタイルガイド

• Normalize• モデル化

スタイルガイド

〜 〜

.eslintrc

React Styleguidist

•コードスタイルの統一

•共通コンポーネント化

•ステートレスなコンポーネント

スタイルガイドの効能

Normalize by normalizr

Actions

components/todo_list.js

actions/todos.js

Reducersreducers/todos.js

components/todo_list.js

Update ?

Schema

Normalize

Model

Normalize

components/todo_list.js

•Store の中身の整理

•コンポーネントの責務とStore の責務

Normalize の効能

モデル化

after

before

models/todo.js

PropTypes

components/todo.js

モデル化の効能

•PropTypes 型の定義

•モデルとしての処理

• スタイルガイド

• Normalize• モデル化

WE’RE HIRING!.

Sansan 神山ラボ

$ git clone https://github.com/MtBlue81/react-redux-sample$ npm install$ npm run build$ open index.html

参考：

https://facebook.github.io/immutable-js/

https://github.com/paularmstrong/normalizr