ReactLogin

React 로그인 Modal 만들기 9 - Redux Saga 적용

React 로그인 Modal 만들기 9 - Redux Saga 적용

모듈 설치하기

yarn add redux-saga

Reducer 정의

import { SIGNUP_FAILURE, SIGNUP_REQUEST, SIGNUP_SUCCESS } from "../type";

const initialState = "";

export const signupRequest = (form) => ({
  type: SIGNUP_REQUEST,
  data: form,
});

const SignupReducer = (state = initialState, action) => {
  switch (action.type) {
    case SIGNUP_REQUEST:
      return {
        ...state,
      };
    case SIGNUP_SUCCESS:
      return {
        ...state,
      };
    case SIGNUP_FAILURE:
      return {
        ...state,
      };
    default:
      return state;
  }
};

export default SignupReducer;
import axios from "axios";
import { LOGIN_FAILURE, LOGIN_REQUEST, LOGIN_SUCCESS } from "../type";

const initialState = {
  token: localStorage.getItem("token"),
};

export const loginRequest = (loginData) => ({
  type: LOGIN_REQUEST,
  data: loginData,
});

const LoginReducer = (state = initialState, action) => {
  switch (action.type) {
    case LOGIN_REQUEST:
      console.log("Log In Reqeust");
      return {
        ...state,
      };
    case LOGIN_SUCCESS:
      console.log("Log In Success");
      return {
        ...state,
        token: localStorage.getItem("token"),
      };
    case LOGIN_FAILURE:
      console.log("Log In Failure");
      return {
        ...state,
      };
    default:
      return state;
  }
};

export default LoginReducer;

Root Reducer 생성

import { combineReducers } from "redux";
import LoginReducer from "./LoginReducer";
import SignupReducer from "./SignupReducer";

const createRootReducer = combineReducers({
  LoginReducer,
  SignupReducer,
});

export default createRootReducer;

Saga

import axios from "axios";
import { all, call, put, takeEvery, fork } from "redux-saga/effects";
import {} from "../reducers/LoginReducer";
import { SIGNUP_REQUEST, SIGNUP_SUCCESS } from "../type";

const SignupUserAPI = (signupData) => {
  return axios.post("/api/signup", signupData).then((response) => {
    return response.data;
  });
};

function* signupUser(action) {
  try {
    const result = yield call(SignupUserAPI, action.data);

    yield put({
      type: SIGNUP_SUCCESS,
      data: result,
    });
  } catch (e) {
    yield put({
      type: SIGNUP_REQUEST,
    });
  }
}

function* watchSignupUser() {
  yield takeEvery(SIGNUP_REQUEST, signupUser);
}

export default function* signupSaga() {
  yield all([fork(watchSignupUser)]);
}
import axios from "axios";
import { LOGIN_FAILURE, LOGIN_REQUEST, LOGIN_SUCCESS } from "../type";
import { all, call, fork, put, takeEvery } from "redux-saga/effects";

const loginUserAPI = (loginData) => {
  return axios
    .post("/api/login", loginData)
    .then((response) => {
      localStorage.setItem("token", response.headers.authorization);
      return response.data;
    })
    .catch((err) => {
      console.log(err);
    });
};

function* loginUser(action) {
  try {
    const result = yield call(loginUserAPI, action.data);
    yield put({
      type: LOGIN_SUCCESS,
      data: result,
    });
  } catch (e) {
    yield put({
      type: LOGIN_FAILURE,
    });
  }
}

function* watchLoginUser() {
  yield takeEvery(LOGIN_REQUEST, loginUser);
}

export default function* loginSaga() {
  yield all([fork(watchLoginUser)]);
}

Root Saga 생성

import { all, fork } from "redux-saga/effects";
import loginSaga from "./LoginSaga";
import signupSaga from "./SignupSaga";

export default function* rootSaga() {
  yield all([fork(loginSaga), fork(signupSaga)]);
}
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { composeWithDevTools } from 'redux-devtools-extension'; // 리덕스 개발자 도구
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './redux/sagas';
import createRootReducer from './redux/reducers';

const sagaMiddleware = createSagaMiddleware();
const store = createStore(createRootReducer, composeWithDevTools(applyMiddleware(sagaMiddleware)))
sagaMiddleware.run(rootSaga);

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

reportWebVitals();
Share