리액트와 리덕스 그리고 리덕스 사가 비동기처리 - Redux series(4)

// src/modules/counter/actions.ts  

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

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

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

// src/modules/counter/sagas.ts

import { put, takeEvery, delay, takeLatest } from 'redux-saga/effects';
import { increase, decrease, INCREASE_ASYNC, DECREASE_ASYNC } from './actions';

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

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

export function* increaseAsyncSaga() {
  yield delay(1000);
  yield put(increase());
}

export function* decreaseAsyncSaga() {
  yield delay(1000);
  yield put(decrease());
}

export function* counterSaga() {
  yield takeEvery(INCREASE_ASYNC, increaseAsyncSaga);
  yield takeLatest(DECREASE_ASYNC, decreaseAsyncSaga);
}

// src/modules/counter/index.ts

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

const rootReducer = combineReducers({
  counter
});

export function* rootSaga() {
  yield all([counterSaga()]);
}

export type RootReducerType = ReturnType<typeof rootReducer>;

export default rootReducer;

// src/components/Counter.tsx

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

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

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

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

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

export default Counter;

// src/modules/users/types.ts

// Generated by https://quicktype.io
//
// To change quicktype's target language, run command:
//
//   "Set quicktype target language"

export type UsersType = {
  id:       number;
  name:     string;
  username: string;
  email:    string;
  address:  Address;
  phone:    string;
  website:  string;
  company:  Company;
}

export type Address = {
  street:  string;
  suite:   string;
  city:    string;
  zipcode: string;
  geo:     Geo;
}

export type Geo = {
  lat: string;
  lng: string;
}

export type Company = {
  name:        string;
  catchPhrase: string;
  bs:          string;
}

yarn add axios redux-devtools-extension

// src/modules/users/actions.ts

import { AxiosError } from 'axios';
import { UsersType } from './types';

export const GET_USERS_START = 'users/GET_USERS_START' as const;
export const GET_USERS_SUCCESS = 'users/GET_USERS_SUCCESS' as const;
export const GET_USERS_ERROR = 'users/GET_USERS_ERROR' as const;

export const getUsersStart = () => ({ type: GET_USERS_START });
export const getUsersSuccess = (users: UsersType[]) => ({
  type: GET_USERS_SUCCESS,
  payload: users
});
export const getUsersError = (error: AxiosError) => ({
  type: GET_USERS_ERROR,
  payload: error
});

export type GetUsersActionsType =
  | ReturnType<typeof getUsersStart>
  | ReturnType<typeof getUsersSuccess>
  | ReturnType<typeof getUsersError>;

// src/modules/users/reducer.ts

import {
  GetUsersActionsType,
  GET_USERS_START,
  GET_USERS_SUCCESS,
  GET_USERS_ERROR
} from './actions';
import { UsersType } from './types';
import { AxiosError } from 'axios';

type State = {
  loading: boolean;
  data: UsersType[] | null;
  error: AxiosError | null;
};

const initiaState = {
  loading: false,
  data: null,
  error: null
};

export default function users(
  state: State = initiaState,
  action: GetUsersActionsType
): State {
  switch (action.type) {
    case GET_USERS_START:
      return {
        ...state,
        loading: true
      };
    case GET_USERS_SUCCESS:
      return {
        ...state,
        loading: false,
        data: action.payload
      }
    case GET_USERS_ERROR:
      return {
        ...state,
        loading: false,
        error: action.payload
      }
    default:
      return state;
  }
}

// src/modules/users/sagas.ts

import { put, call, takeEvery } from 'redux-saga/effects';
import axios, { AxiosResponse } from 'axios';
import { getUsersSuccess, getUsersError, GET_USERS_START } from './actions';

function* getUsers () {
  const users: AxiosResponse = yield call(() => axios.get('http://jsonplaceholder.typicode.com/users'));
  try {
    yield put(getUsersSuccess(users.data));
  } catch(e) {
    yield put(getUsersError(e));
  }
}

export function* getUsersSaga() {
  yield takeEvery(GET_USERS_START, getUsers)
}

// src/modules/users/index.ts

import { combineReducers } from 'redux';
import counter, { counterSaga } from './counter';
import users, { getUsersSaga } from './users';
import { all } from 'redux-saga/effects';

const rootReducer = combineReducers({
  counter,
  users
});

export function* rootSaga() {
  yield all([counterSaga(), getUsersSaga()]);
}

export type RootReducerType = ReturnType<typeof rootReducer>;

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';
import { composeWithDevTools } from 'redux-devtools-extension';

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
  rootReducer,
  composeWithDevTools(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/Users.tsx

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { RootReducerType } from '../modules';
import { getUsersStart } from '../modules/users';

const Users = () => {
  const dispatch = useDispatch();
  const state = useSelector((state: RootReducerType) => state.users);
  console.log(state);

  useEffect(() => {
    dispatch(getUsersStart());
  }, [dispatch]);

  const { loading, data } = state;

  if (loading) {
    // (1)
    return <div>Loading...</div>;
  }

  return (
    // (2)
    <div>
      {data?.map(user => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  );
};

export default Users;