Typescript×Reduxでカウンタアプリ作ってみる！

この記事は約 7 分で読めます。

[chatMain]みなさんこんにちは！今回はTypescriptとReduxでカウンタアプリを作ってみようと思います！[/chatMain]

[chatReply]おお！いつもは商品レビューとか書いてるのに、今日はエンジニアっぽいこと書くんだな！[/chatReply]

[chatMain]もちろん！そもそも私はエンジニアですからね！たまにはエンジニアっぽいことも書かないとなーと思って筆を取った次第です！[/chatMain]

今回の成果物

ではまず最初に今回のアプリの挙動を見ていきたい。

各ソースコード

今回のアプリで必要なライブラリは下記の通り！

• react-redux
• redux
• @types/react-redux
• @types/redux

最低限これらがあれば動作するようになっている。

初期状態では、カウントは０になっている。

incrementボタンを押すと1カウントがプラスされる。

decrementを押すと1カウントがマイナスされる。

超絶シンプルなカウンタアプリになっている。

Action

まずEnumで今回のアプリで実装するActionを定義する。

incrementとdecrementだけだから、そのまま定義。

次に、InterfaceでActionの型を定義する。

今回はreduxライブラリのActionを継承したInterfaceを作っているが、Actionはtypeを持っているらしい。

最後にDispacherで使うためのAmountを実装する。

import {Action} from 'redux'

export enum    ActionNames{
   Increment = 'inc',
   Decrement = 'dec'
}

export interface IIncrement extends Action{
   type : ActionNames.Increment
}

export interface IDecrement extends Action {
   type : ActionNames.Decrement;
}

// 名前は何でもいい。IncrementでもIncでも。なんでも。
// 戻り値は上で定義したInterfaceを返すようにする。
// いわばActionCreatorといわれるやつ。
export const IncrementAmount = () : IIncrement => ({type : ActionNames.Increment});
export const DecrementAmount = () : IDecrement => ({type : ActionNames.Decrement});

export type ActionType = IIncrement | IDecrement;

Reducer

続いてReducerではactionに対する実装を書く。

また同時に画面でどのようなstateを持っているのかも書く。

今回の場合は、数字を増やしたりするだけなので、num一つだけ持っている。

またreducerの中のreturnで結構ミスをして、stateが変わらない！ってケースが多いから注意。

import {ActionNames, ActionType} from "../Actions/CounterAction";


export interface IState {
   num : number
}

const initialState : IState = {num: 0};

const CounterReducer = (state : IState = initialState , action : ActionType): IState => {
   switch (action.type) {
      case ActionNames.Increment:
         // 値が変わらない場合などはここでミスってる場合が多いから注意。 
         return {num : state.num + 1};
      case ActionNames.Decrement:
         return {num : state.num - 1};
      default:
         return state;
   }
};

export default CounterReducer;

Store

storeはよくわからん。

今時点では、私も書き方を理解してないため、呪文のようにただただ覚えて書いている。

ただ、後ほど出てくるIndex.tsxのProviderコンポーネントのstoreに渡すためのstoreのオブジェクトを作るとは知っている。

私は今の時点では、こんなもんかーって感じ。

import {combineReducers,createStore,Action} from 'redux'
import CounterReducer, {IState} from "../Reducers/CounterReducer";
import {ActionType} from "../Actions/CounterAction";

const rootReducer = combineReducers(
   {CounterReducer}
   );

export default createStore(rootReducer);

export type ReduxState = {
   // ここでReducerの名前を正しく書かないとstateがバグる 
   CounterReducer : IState
};

export type ReduxAction = ActionType | Action;

Container

コンポーネントの中で実装する関数を定義する？場所的な感じだと思う。

ここで定義した関数をコンポーネントで使えるようになる。

また、connectの中でいろいろしてるが、これも今は呪文的な感じで書いている。

コンポーネント内で使うpropsと紐づけるためにいろいろ書いている。と理解している。

import {ReduxAction, ReduxState} from "../Store/store";
import {DecrementAmount, IncrementAmount} from "../Actions/CounterAction";
import {connect} from "react-redux";
import {Dispatch} from "react";
import Counter from "./Counter";

export class ActionDispather{
   constructor(private dispatch: (action : ReduxAction) => void) {
   }

   public Increment() {
      this.dispatch(IncrementAmount())
   }

   public Decrement(){
      this.dispatch(DecrementAmount())
   }
}

export default connect(
   (state : ReduxState) => {
      return {value : state.CounterReducer}
},
   (dispatch : Dispatch<ReduxAction>) => ({actions : new ActionDispather(dispatch)})
)(Counter)

ちなみに下記の箇所は書き方がいっぱいある。

export class ActionDispatcher {
   constructor(private dispatch: (action: ReduxAction) => void) {}

パターン１

export class ActionDispatcher {
   dispatch : (action: ReduxAction) => void
   constructor(dispatch: (action: ReduxAction) => void) {
      this.dispatch = dispatch;
   }

パターン２

type dispatchType = (action: ReduxAction) => void

export class ActionDispatcher {
   dispatch : dispatchType;
   constructor(dispatch: dispatchType) {
      this.dispatch = dispatch;
   }

パターン３

type dispatchType = (action: ReduxAction) => void

export class ActionDispatcher {
   constructor(private dispatch: dispatchType) {
   }

なにをしているのか？

これは結局のところ型付けである。

actionという名前で、ReduxAction型を受け取り、戻り値がvoid型の関数という型を指定しているのである。

なので、この関数の型をtypeエイリアスに入れてしまえば結構楽になる。

Component

続いて、コンポーネント。

好きかって書いていいと思う。

が、Propsは上記のContainerのconnectで書いた型を受け付けるようInterfaceで宣言にしないといけない。

もちろんコンポーネントが上記で指定した型のpropsを受け取れるようにする。

import React from "react";
import {IState} from "../Reducers/CounterReducer";
import {ActionDispather} from "./Container";

interface Props {
   value : IState;
   actions : ActionDispather
}


class Counter extends React.Component<Props, {}>{

   render() {
      return (
         <div>
            <p>{this.props.value.num}</p>
            <button type={"button"} onClick={() => this.props.actions.Increment()}>Increment</button>
            <button type={"button"} onClick={() => this.props.actions.Decrement()}>Increment</button>
         </div>
      )
   }
}

export default Counter

Index.tsx

Indexはシンプル。

Providerで囲んで、さっき作ったstoreを渡すだけ。

どういう仕組みかは詳しく知らんが、これで動く。

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import {Provider} from "react-redux";
import store from "./Store/store";
import Counter from "./Component/Container";

ReactDOM.render(
  <Provider store={store}>
    <Counter />
  </Provider>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Gitに上げてます！

このコードはGitのリポジトリに上げています。

私はTypescript×Reduxを学ぶときに、まずは動くアプリを目標にしました。

なぜならとりあえず動けば、いろいろなステータスを変えればどうなっているかわかるから。

ただネット上にはコンパイルエラーだの何かのエラーで動くコードがあるというのがまれで、結構な時間を消費した。

だから今回のアプリは実際に動く形としてGitに上げている。

• https://github.com/adaman3568/Typescriot-CounterApp/network/dependencies.git

以上。