React Reduxをある程度理解したあと、下記のHPを読むと整理できます。 参考HP： React Redux の難しかった点をできるだけシンプルに図解 - Qiita これを踏まえたうえで備忘録を箇条書きにしてみました。 ・Stateの更新は唯一Reducerだけが行うことができる …

useDispatchも使用して、 mapDispatchToPropsを消し去り、connectメソッドも消し去る。 ［プロジェクト名］/src/components/App.js import {INCREASE_COUNT} from "../actions"; import {useDispatch} from 'react-redux'; import {useSelector} from 'react…

つぎにHooksを使って書き換えていきましょう。 まず、useSelectorを使って、mapStateToPropsの存在を消し去ります。 ［プロジェクト名］/src/components/App.js import {INCREASE_COUNT} from "../actions"; import {connect} from 'react-redux'; import {u…

さて、stateを変更するアプリケーション作成するには、reducerを作成する際に、その関数の引数に、stateに加え、actionを入れなくてはいけません。 actionを入れるとなると、ActionCreator、dispatchも使用することになります。 下記では、＋ボタンを押すと…

ここでは、Container Componentを作成してやってます。 ［プロジェクト名］/src/index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './components/App'; import {createStore} from 'redux'; import {Provider…

［プロジェクト名］/src/components/App.js import '../App.css'; import store from '../index'; function App() { return ( <div> <p>MyReact</p> <p>{store.getState().text}</p> </div> ); } export default App; ［プロジェクト名］/src/reducers/text.js const initialState = {…

さて、index.jsを下記のようにしていきます。 ［プロジェクト名］/src/index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import {createStore} from 'redux'; import {Provider} from 'react-redux'…

Reduxの印象としては、登場人物が多く、また、javascriptにありがちで、varietyがあり、初心者にとっつきにくいような感じでした。 Reac初心者でも読めば必ずわかるReactのRedux講座 | アールエフェクト (reffect.co.jp) このホームページを参考して話を進め…