리액트에서 리덕스 사가를 사용하기

npm i redux react-redux redux-devtools-extension redux-saga

> action // 액션 타입, 객체를 정의해줍니다.
> reducer // 리듀서를 작성합니다.
> saga // 사가를 작성합니다.
> store // 스토어를 설정 / 생성하고 반환해줍니다.

export const COUNTER_REQUEST = 'COUNTER_REQUEST'
export const COUNTER_SUCCESS = 'COUNTER_SUCCESS'
export const COUNTER_FAIL = 'COUNTER_FAIL'

// 액션 객체를 생성해주는 함수입니다.
// 여러군데에서 같은 액션 객체를 생성하면 비효율적이므로 이렇게 코딩할 수 있습니다.
export const counterAction = () => {
  return { type: COUNTER_REQUEST }
}

export const initialState = {
  counterLoading: false, // 로딩 상태
  counterDone: false, // 완료 상태
  counterError: null, // 에러 메시지
  number: 0, // 초기 number
}

export const initialState = {
  counterLoading: false,
  counterDone: true,
  counterError: null,
  number: 0,
}

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case type.COUNTER_REQUEST:
      return {
        ...state,
        counterLoading: true,
        counterDone: false,
        counterError: null,
      }
    case type.COUNTER_SUCCESS:
      return {
        ...state,
        counterLoading: false,
        counterDone: true,
        number: state.number + 1,
      }
    case type.COUNTER_FAIL:
      return {
        ...state,
        counterLoading: false,
        counterDOne: false,
        counterError: '에러에러',
      }

    default:
      return state
  }
}

export default reducer

import { combineReducers } from 'redux'
import counter from './counter'

const rootReducer = (state, action) => {
  switch (action.type) {
    default: {
      const combineReducer = combineReducers({ counter })
      return combineReducer(state, action)
    }
  }
}

export default rootReducer

function* watchCounter() {
  yield takeLatest(type.COUNTER_REQUEST, counter)
}

function* counter() {
  try {
    //yield call(counterAPI);
    yield delay(1000)
    yield put({
      type: type.COUNTER_SUCCESS,
    })
  } catch (error) {
    yield put({
      type: type.COUNTER_FAIL,
    })
  }
}

function* counterAPI() {
  // axios로 API 요청을 보내고 결과를 return 해주면 됩니다.
}

export default function* counterSaga() {
  yield all([fork(watchCounter)])
}

import * as type from '.action/counter'
import { all, fork, takeLatest, put, call, delay } from 'redux-saga/effects'

function* counterAPI() {
  // API
}

function* counter() {
  try {
    //yield call(counterAPI);
    yield delay(1000)
    yield put({
      type: type.COUNTER_SUCCESS,
    })
  } catch (error) {
    yield put({
      type: type.COUNTER_FAIL,
    })
  }
}

function* watchCounter() {
  yield takeLatest(type.COUNTER_REQUEST, counter)
}

export default function* counterSaga() {
  yield all([fork(watchCounter)])
}

import { applyMiddleware, createStore } from 'redux'
import createSagaMiddleware from 'redux-saga'
import { composeWithDevTools } from 'redux-devtools-extension'
import rootSaga from '../saga' // 작성한 사가
import rootReducer from '../reducer' // 작성한 리듀서

const sagaMiddleware = createSagaMiddleware() // 사가 미들웨어 생성

const configureStore = () => {
  // 미들웨어를 적용해줍니다.
  // 개발모드에서만 익스텐션 사용하도록 설정
  const MiddleWare =
    process.env.NODE_ENV === 'production'
      ? applyMiddleware(sagaMiddleware)
      : composeWithDevTools(applyMiddleware(sagaMiddleware))

  //루트리듀서와 함께 스토어를 등록해줍니다.
  const store = createStore(rootReducer, MiddleWare)

  // 아까 생성한 사가를 구동해줍니다.
  sagaMiddleware.run(rootSaga)

  // 등록된 스토어 반환
  return store
}

export default configureStore

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { Provider } from 'react-redux'
import configureStore from './store/configureStore'

const store = configureStore() // 스토어 생성

ReactDOM.render(
  // 생성된 스토어를 Provider의 Props로 제공
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

npm i -D @babel/plugin-transform-runtime

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react",
    ],
    "plugins": [ "@babel/plugin-transform-runtime"]
}

import React, { useCallback } from 'react'
import { useDispatch } from 'react-redux'
import { counterAction } from '../action/counter'

const Button = () => {
  const dispatch = useDispatch()
  const onClick = useCallback(() => {
    dispatch(counterAction()) // 디스패치
  }, [])

  return <button onClick={onClick}>누르면 증가합니다.</button>
}

export default Button

import React from 'react'
import { useSelector } from 'react-redux'

const Home = () => {
  const { number, counterLoading } = useSelector(state => state.test)

  return <div>{counterLoading ? '로딩중' : number}</div>
}

export default Home