LoginSignup
3
3

More than 5 years have passed since last update.

ある程度フルスタックなReact周辺まとめ

Last updated at Posted at 2017-12-08

React
抑えどころ! データは親コンポーネントから子供コンポーネント常に一方向に流れる(undirectional data flow)
Propsは親子コンポーネントから子供のコンポーネントになんのデータをどんなpropsの名前で流していくか、重要なものなので
reactのexampleコードをたくさん読んで見慣れておくと最高です:)

読んで良いなと思ったコードたち(propsがいっぱいで大変ですが じ〜〜っくり読むと徐々に慣れてくると思います)
https://github.com/gakuakachi/sound-redux
https://github.com/gakuakachi/login-flow

Redux
https://egghead.io/courses/getting-started-with-redux -> reduxを作った人がreduxの説明をしてくれる動画
https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 -> containerとcomponentについて
-Reduxのstoreのstateを更新できるのは基本的にはactionのみ
-actionとはdispatch({type: 'actionのtype', payload: '更新するためのデータ'})
-reducerでactionが受け取られ、各actiontypeに沿って、何を、どう更新するか

connectメソッド - connect(mapStateToProps, mapDispatchToProps)(Component) ReactコンポーネントでReduxstoreのstateを使えるようにする、
mapStateToProps -reduxStoreのstateをconnectしたコンポーネントに渡す(使うstateはselectorでなんのstateを使いたいか選びましょ!)
mapDispatchToProps - dispatchメソッドをconnectしたコンポーネントに渡す

Styled Component ->スタイルもコンポーネント化していきましょう的な
https://hackernoon.com/styled-components-in-action-723852f2a93d

Selector -> reduxのstateからどんなデータが欲しいか、選ぶ(各コンポーネントのselector.jsに書いてあります)
Reselect -> データーをメモ化(いちいち計算しなさなくてもいいようにできる)
https://github.com/reactjs/reselect

Immutable.js -> データそのものを書き換えるのではなく、元データと更新分を参照して、新たな値を返す

以下の関数をdocumentationでさっくり見てみてください
get getIn => selectorにてどのstateを使うかget,もしくは取りたいstateが深い場合はgetIn
set setIn => stateオブジェクト(だいたいオブジェクト)を更新するとき
merge mergeDeep => stateオブジェクト(だいたいオブジェクト)のプロパティを複数個、更新するとき

ReduxForm
Reduxのstoreを利用して、formデータの保存場所にできる。
https://redux-form.com/7.1.2/

Redux-saga
キーワード
Saga: put, call, takeLatest
ES6: generator https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Generator
promise https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise (edited)

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3