Redux導入の検討

[sakelog]

ReactにReduxを導入する

React Redux を使用して導入した。

React Reduxのインストールは下記コマンド。

yarn add react-redux

公式のテンプレートが実装の上で参考になった。

npx create-react-app my-app --template redux

TypeScript版

npx create-react-app my-app --template redux-typescript

Reduxを動かすためには

Reduxを動かすには、Providerとstateを保持するstoreとstateを遷移させるためのreducerが必要。

storeの作り方

公式のチュートリアルを見ただけだとstoreの作り方が分からなくて困った。

store.tsxとして下記を保存。stateとreducerを紐付ける。

import { configureStore } from '@reduxjs/toolkit';
import remainTimeReducer from './lib/remainTimeSlice';
import colorModeReducer from './lib/colorModeSlice';

export default configureStore({
  reducer: {
    TimerState: remainTimeReducer,
    ColorMode: colorModeReducer,
  },
});

あとは、Providerを使う箇所でimportして取り込む。

import { Provider } from 'react-redux';
import store from '../redux/store';

import AppWrapper from '../app/AppWrapper';

const TopPage = () => {
  return (
    <Provider store={store}>
      <AppWrapper />
    </Provider>
  );
};

export default TopPage;

createSlice

reducerはcreateSliceを使って作る。

createSliceでは、reducerの名前、state、初期状態、actionを一度に定義できる。

作ったactionはexportしないと使えない。

外部の入力によって値を変化させたい場合は、createSliceの外から、createSliceのactionを参照するfunctionを作る。

詰まったポイント

componentDidmoutで読み込み時にhooksを発生させることができない。 そのまま記載すると、常にdispatch命令が走ってしまう。 　→初回の処理時にフラグを立てて対処。

タイマー処理が2重に走ってしまう 　→タイマーを動かすactionで最初にclearIntervalする。

mapStateToProps、mapDispatchToPropsでconnectしようとするとエラーになる 　→mapStateToProps、mapDispatchToPropsは両方引数に渡す必要がある。

connect(
  mapStateToProps,
  mapDispatchToProps
)(Component)