Redux基礎⑤

さて、stateを変更するアプリケーション作成するには、reducerを作成する際に、その関数の引数に、stateに加え、actionを入れなくてはいけません。

actionを入れるとなると、ActionCreator、dispatchも使用することになります。

下記では、＋ボタンを押すと、カウンターの数は１増えるようなものを、Reduxを使って作成してます。（ここではおなじみのイベントハンドラは意図的に使用してません。後でイベントハンドラでの処理に変更していく予定です。むしろ、ここでは、actionを使って同じようなことができている点に着目してください。）

 

ここは、参考HPReac初心者でも読めば必ずわかるReactのRedux講座 | アールエフェクト (reffect.co.jp)

を参考しながら理解してください。

 

［プロジェクト名］/src/components/App.js（最下段に別記載方法のものも載せてます）


import {INCREASE_COUNT} from "../actions";
import {connect} from 'react-redux';

function App({count,increase}) {
  return (
    <div>
       <p>MyReact</p>
       <p>{count}</p>
       <button type="button"
               onClick={increase}>UP</button>
    </div>
  );
}

const mapStateToProps = (state) => {
  return{
      count: state.count,
  }
}

const mapDispatchToProps = (dispatch) =>{
  return{
      increase: () => dispatch({type: INCREASE_COUNT}),
  }
}

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


［プロジェクト名］/src/actions/index.js

export const INCREASE_COUNT = "INCREASE_COUNT";

export function increaseCount(count){
    return{
        type: INCREASE_COUNT,
        count:count,
    }
}

［プロジェクト名］/src/reducers/Counter.js

import {INCREASE_COUNT} from '../actions';

const initialState = {
    count: 0
}

function Counters(state = initialState, action){
    switch(action.type){
        case INCREASE_COUNT:
            return{
                ...state,
                count: state.count + 1,
            }
        default:
            return state;
    }

}

export default Counters;

［プロジェクト名］/src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './components/App';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import Counters from './reducers/Counter';

const store = createStore(Counters);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);


 

 

App.jsは、下の記載のほうが理解できるかもしれません。


import {INCREASE_COUNT} from "../actions";
import {connect} from 'react-redux';

function App(props) {
  return (
    <div>
       <p>MyReact</p>
       <p>{props.count}</p>
       <button type="button"
               onClick={props.increase}>UP</button>
    </div>
  );
}

const mapStateToProps = (state) => {
  return{
      count: state.count,
  }
}

const mapDispatchToProps = (dispatch) =>{
  return{
      increase: () => dispatch({type: INCREASE_COUNT}),
  }
}

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