さて、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 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);
