Redux基礎⑦

useDispatchも使用して、

mapDispatchToPropsを消し去り、connectメソッドも消し去る。

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

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

import {useDispatch} from 'react-redux';

import {useSelector} from 'react-redux';

function App() {

  const count = useSelector((state) => state.count);

  const dispatch = useDispatch();

  const increase = () =>{

    dispatch({type: INCREASE_COUNT});

  }

  return (

    <div>

       <p>MyReact</p>

       <p>{count}</p>

       <button type="button"

               onClick={increase}>UP</button>

    </div>

  );

}

export default App;

［プロジェクト名］/src/actions/index.js→そのまま

［プロジェクト名］/src/reducers/Counter.js→そのまま

［プロジェクト名］/src/index.js→そのまま

（

生のReduxだと、初心者だと、Providerを使用している際に、別のファイルで、いきなりdispatchが出てくると、これはどこから来たということもあります。これは

使いたいjsファイルで、storeをimportして、const dispatch = store.dispatch

のようにしているのと同じです。

）

［ただし、このuseDispatchについては、dispatch関数は使用できるようになりますが、それ以外、たとえば、ActionCreatorをApp.jsで使えるようにする（フォーム使用でonSubmit利用の場合に必要）方法はさそうなので、その際は、以前のmapDispatchToPropsを使用するしかないようです。redux toolkitだと、ActionCreatorを通常export しているので、import して使いやすいかもしれません（後日検証）］

次回は、推奨されているRedux toolkitを使い、

actionsフォルダ、reducersフォルダを消し去り

reduxフォルダ内で、redux toolkitを使用してみます。

参考HP：

【Redux入門】初学者でも理解できるReduxの仕組みを解説します！(Redux Toolkitを使用) - YouTube