【Redux】ReactコンポーネントからReduxを操作する

インストール

npx create-react-app sampleapp
npm install redux react-redux

Quick Start · React Redux

react-reduxの目的

Reduxのstate, dispatch関数をReactのpropsで操作できるようにする

1. でAppを囲む
2. mapStateToPropsとmapDispatchToPropsを用意し、connect()に渡す
3. connect()がReactコンポーネントとReduxStoreを接続し、新しいコンポーネントを返す

具体的なやり方

• コンポーネントごとに必要なstateとstateに対する処理を設計してreducerにまとめる

// この初期化のデータ構造がstoreの仕様になるイメージ
const initState = {
  todos: [],
  count: 0
};

export default (state = initState, action) => {
  switch (action.type) {
    case 'ADD_TODO': {
      return 
    }
  }
}

https://react-redux.js.org/next/introduction/quick-start * reducerを呼び出すためのactionの定義とactionを生成する関数を作る（ActionCreater）

// actionはタイプ(type)と送信するデータ(何でもいい)の組み合わせ
// 削除など、渡すデータが不要なら無くていい
export const ADD_TODO = 'ADD_TODO'
export function addTodo(text) {
  return { type: ADD_TODO, text };
}

• reducerをcombineReducersにまとめる

// 最終的にcombineReducersに渡すものをここでまとめる
// combineReducers({ todoReducer, reducer2, reducer3 })
export const reducers = { todoReducer, reducer2, reducer3 };

• createStoreでcombineReducersを渡す

import { createStore, combineReducers, applyMiddleware } from 'redux';
import { reducers } from '../src/reducers'

// combineReducersはいくつかのreducerをまとめるものです。
// 一つしかないならreducerをそのまま渡しても良い。
const store = createStore(
  combineReducers(reducers),
)

• それぞれのcomponentで必要なstate, actionを定義して、connectする

import { connect } from 'react-redux';

// ここで定義した値は、propsでアクセスできます。
// reducerでstoreに保存した値を読み出します。
const mapStateToProps = state => {
  return {
    todos: state.todos,
    count: state.count
  }
};

// ここで定義した関数は、propsでアクセスできます
// 更新削除など、reducerに定義した処理を発動できます。
const mapDispatchToProps = dispatch => {
  return {
    deleteTodo: id => dispatch(deleteTodo(id))
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(TodoItem);