React, Reduxを初心者向けに解説する

React, Reduxで知識が曖昧だったところを復習したのでアウトプットします。

props

・親コンポーネントから子コンポーネントに渡される
・不変のデータ
・クラスコンポーネントではメンバ変数としてthis.propsでアクセスできる
・関数コンポーネントではその関数の引数として扱われる

state

コンポーネント自身で使われる値
・可変のデータ
・setStateでDOMが更新される
・直接代入は非推奨
・コンポーネントからコンポーネントには渡らない

コンポーネント

Classコンポーネント

・ライフサイクルメソッドが使える
・constructorが使える
・stateを持てる

関数コンポーネント

・関数名の頭文字は大文字
・関数の引数でpropsを受け取る
・stateを持てない
・ライフサイクルメソッドを持てない

Redux

Reactのみだと値をバケツリレー形式で親から子に渡していかないといけないがReduxを導入することでどのコンポーネントからでも値を操作できるようになる。
Redux単体でも使えるし、Vueなどとも組み合わせて使える。

reducer

その時点でのstateから新しいstateを返す
reducer自体は関数

store

createStoreでstoreを作成する
const store = createStore(reducer名)

持っているメソッド
・dispatch
・getState
・subscribe
など

storeの中身

{ dispatch: [Function: dispatch],
  subscribe: [Function: subscribe],
  getState: [Function: getState],
  replaceReducer: [Function: replaceReducer],
  [Symbol(observable)]: [Function: observable] }

action

typeは必須でtypeという名前のkeyを含めなければならない
{type: "ADD_TODO"}

react-redux

ReactとReduxを連携させる時に使う。

Providerとconnectを使うことでreactでreduxのstateやdispatchを使うことができる
ちなみにconnectはstoreにアクセスしたいcomponentにのみ使用する。

目的別の2種類のコンポーネント

Reduxを導入するとコンポーネントはさらに大まかに2種類に分類することができる。
PresentationalComponentとContainerComponent

PresentationalComponent

見た目を重視したComponentでjsxを使ってHTMLを書いていく。

ContainerComponent

機能を重視したComponentでstateやdispatcherをPresentationalComponentで使えるようにする。

import { connect } from 'react-redux'
import hogeComponent from './components/hogeComponent'

const mapStateToProps = (state) => ({

})

const mapDispatchToProps = (dispatch) => ({

})

export default connect(mapStateToProps, mapDispatchToProps)(hogeComponent)

mapStateToProps

stateをpropsとして扱えるようにする為のもの

引数には自動的にstateが入るようになっている。
componentで使用したいstateをここで定義する。

mapDispatchToProps

dispatchをpropsとして扱えるようにする為のもの

componentで使用したいdispatchをここで定義する。

connectの書き方

export default connect(mapStateToProps, mapDispatchToProps)(コンポーネント名)
// ↓mapStateToPropsのみを使う場合
export default connect(mapStateToProps)(コンポーネント名)
// ↓mapDispatchToPropsのみを使う場合
export default connect(null, mapDispatchToProps)(コンポーネント名)

redux-saga

非同期処理を実現する
TBD

ES6(おまけ)

...の意味

...はスプレッド演算子といって中身が展開される

a = [1, 2, 3]
b = [a, 4, 5]
// [[1, 2, 3], 4, 5]
c = [...a, 4, 5]
// [1, 2, 3, 4, 5]

foo = {a: 1, b: 2, c: 3}
{...foo}
// {a: 1, b: 2, c: 3}

thisの値

function
内部のthisは実行時のレシーバのオブジェクトになる

arrow function
内部のthisはこのメンバ関数が定義されているオブジェクトになる