Reactを学ぶ12

June 12, 2020

Udemy「フロントエンドエンジニアのためのReact・Reduxアプリケーション開発入門」作業時間：2時間経過時間：45時間

すでに知っているセクション等は省略。

Reactアプリケーション基礎編

JSX

React.Fragment(API)もしくは<></>記法でラップすることができる。 APIの理解が怪しいことに気づく。。

props

keyにindexは推奨されていなかったけっか。 defaultPropsというクラスプロパティあったのか。関数コンポーネントで定義した場合でも有効。

prop-types

触ってなかったので確認。配列・オブジェクトなどバリデーションのカスタマイズもできる。 PropTypes を用いた型チェック

Reduxアプリケーション基礎編

イントロ

恥ずかしながら、以下の等価を知らなかった。

//returnあり
const hoge = () => {
 return {
  type: 'test'
 }
}
//return省略
const hoge = () => ({
  type: 'test'
})

Reducer

export default combineReducers({hoge,fuga})

Store

Store：状態管理を司るオブジェクトデータ。 createStore(reducer)でstoreを定義する。 Provider：どのコンポーネントからでもStoreを参照できるようにする役割。（従来は親子の参照で子孫まで渡していた）

connect

propsで算出を行うので、クラスコンポーネントのconstructorは不要、らしい。

mapStateToProps：対象のコンポーネントに対して、stateから必要なデータを取り出し、propsとして扱えるようにする役割。 dispatch：アクションが発動したとき、タイプに応じた状態遷移を行う処理。 mapDispatchToProps：対象となるコンポーネントに対して、必要なdispatchを扱えるようにする役割。

以下ではまった。

//以下は動かない(引数で渡すのが間違っていた)
const mapDispatchToProps = dispatch => ({func1,func2})
//以下にするか
const mapDispatchToProps = dispatch => ({
  func1: () => dispatch(func1()),
  func2: () => dispatch(func2())
})
//もしくは以下にしないといけない
const mapDispatchToProps = ({func1,func2})

Blog.