【Redux】【React】本当に基礎の部分。Functional ComponentでHooks(useDispatch, useSelector)

はじめに

Reduxの基礎の部分についてまとめておく。
redux-thunkやredux-sagaを理解するために、Reduxが手元で動かせることを確認した。
Functional ComponentでReduxのHooks（useDispatch, useSelector等）を使った。

Counterコンポーネント

import * as React from 'react';
import { useDispatch, useSelector } from 'react-redux';
//Actionをインポート
import { countUp, countDown } from '../../actions';

export const Counter = (props) => {
  const dispatch = useDispatch();
  const count = useSelector(state => state.count)

  const onCountUp = () => {
    dispatch(countUp());
  };
  const onCountDown = () => {
    dispatch(countDown());
  };

  return (
    <div>
      <div>count:{count}</div>

      <button onClick={onCountUp}>up!</button>
      <button onClick={onCountDown}>down!</button>
    </div>
  );
};

・Viewでボタンがクリックされた時に、Actionがstoreにdispatch（発送）される。
・useSelectorは新しいstateと古いstateに差異があった時に、それをViewに送り反映させる。

Reducer

Actionを受け取った時に、新しいstateにどのように変更するか書く。

frontend/src/reducers/index.tsx

// Reducer
const reducer = (state = { count: 0 }, action) => {

  switch (action.type) {
    case 'COUNT_UP':
      return { count: state.count + 1 };
    case 'COUNT_DOWN':
      return { count: state.count - 1 };
    default:
      return state;
  }
};
export default reducer;

引数のstateを、dispatchされてきたactionを基に処理して返す。

Provider store={store}

frontend/src/javascripts/components/home.tsx

import * as React from 'react';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';

import { Counter } from '../pages/Counter';

import {
  createStore,
} from "redux";
import { Provider } from 'react-redux';
import reducer from '../../reducers/'

const store = createStore(reducer);

export const Home = () => {
  return (
    <BrowserRouter>
      <Provider store={store}>
        <Switch>
          <Route exact path="/redux" component={Counter} 
        </Switch>
      </Provider>
    </BrowserRouter>
  );
};

importしたreducerを基に、storeを作成し、
で以下のコンポーネントと接続する。

Action

frontend/src/actions/index.tsx

export const countUp = () => {
return ({ type: 'COUNT_UP' });
}
export const countDown = () => {
return ({ type: 'COUNT_DOWN' });
}

終わりに。

最後まで読んで頂きありがとうございます
転職の為、未経験の状態からReact,Railsを学習しております。継続して投稿していく中で、その為のインプットも必然的に増え、成長に繋がるかと考えています。
投稿の内容に間違っているところや、付け加えるべきところが多々あるかと思いますので、ご指摘頂けると幸いです。この記事を読んで下さりありがとうございました。