리액트와 리덕스 그리고 리덕스 사가, 타입스크립트 - Redux series(3)

const middleware = (store) => {
  return (next) => {
    return (action) => {
      if (action.type === 'ACTION_TYPE') {
        // 미들웨어가 액션을 판단해서 실행된다
        // ...
      }
    }
  }
}

npx create-react-app counter-saga --typescript
cd counter-saga
yarn add redux react-redux @types/react-redux react-saga @types/redux-saga

// src/modules/counter/actions.ts

// 액션
export const INCREASE = 'counter/INCREASE' as const;
export const DECREASE = 'counter/DECREASE' as const;

// 액션 생성함수
export const increase = () => ({ type: INCREASE });
export const decrease = () => ({ type: DECREASE });

// 액션객체 타입
export type CounterActionType =
  | ReturnType<typeof increase>
  | ReturnType<typeof decrease>;

// src/modules/counter/reducer.ts

import { INCREASE, DECREASE, CounterActionType } from './actions';

const initialState = 0;

const counter = (
  state: number = initialState,
  action: CounterActionType // (1)
): number => { // (2)
  switch (action.type) {
    case INCREASE:
      return state + 1;
    case DECREASE:
      return state - 1;
    default:
      return state;
  }
};

export default counter;

// src/modules/counter/sagas.ts

import { put } from 'redux-saga/effects';
import { INCREASE, DECREASE, increase, decrease } from './actions';

export function* increaseSaga() {
  yield put(increase());
}

export function* decreaseSaga() {
  yield put(decrease());
}

// src/modules/counter/index.ts

export { default } from './reducer';
export * from './actions';
export * from './sagas';

// src/modules/index.ts

import { combineReducers } from 'redux';
import counter, { increaseSaga, decreaseSaga } from './counter';
import { all } from 'redux-saga/effects';

const rootReducer = combineReducers({
  counter
});

export function* rootSaga() {
  yield all([increaseSaga(), decreaseSaga()]);
}

export type RootReducerType = ReturnType<typeof rootReducer>; // (1)

export default rootReducer;

// index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import rootReducer, { rootSaga } from './modules';
import createSagaMiddleware from 'redux-saga';

const sagaMiddleware = createSagaMiddleware();

const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));

sagaMiddleware.run(rootSaga);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </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();

// src/components/Counter.tsx

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { RootReducerType } from '../modules';
import { increase, decrease } from '../modules/counter';

const Counter = () => {
  const state = useSelector((state: RootReducerType) => state.counter); // (1)
  const dispatch = useDispatch();

  const handleIncrease = () => {
    dispatch(increase());
  }

  const handleDecrease = () => {
    dispatch(decrease());
  }

  return (
    <>
      <div>{state}</div>
      <button onClick={handleIncrease}>up</button>
      <button onClick={handleDecrease}>down</button>
    </>
  );
};

export default Counter;