🖥 React Native + Redux + redux-thunk

• 부모 컴포넌트 App.js 에서 모든 데이터를 관리 state
• store에서 이를 소유하고 관리
• action 과reducer으로 데이터 값을 변화시킨다
• axios와 통신하기 위한 middleware로
  redux-thunk 를 사용

📍 사용이유

• 데이터 관리를 편하게 해야할 것같다.
  왜냐하면,,,,,
  많은 라이브러리를 사용할텐데, 정보들이 흩어져있으면 유지/보수하기 어려울 것 같고,
• 데이터의 보안이 중요한 프로젝트이기에 이를 정확하게 관리하는 것이 중요하기 때문에
  Redux를 선택했다.

📍 redux 설치

npm i --save react-redux redux

📍 redux-thunk 설치

npm i redux-thunk

🖥 폴더 구조

• src

  • lib

    • axiosInstance.js

  • store

    • actions
      • actionTypes.js
      • user.js
      • login.js
    • reducers
      • auth.js
      • user.js
      • login.js
      • rootReducers.js
    • store.js

  • cotainers (리듀서 작동하는 공간)

    • auth
      1. Login.js
      2. TakeTextMessage.js
      3. CheckCertificate.js
      4. TakeIdCard.js
      5. TakeVaccinePass.js
      6. SetPassword.js
      7. ResetPassword.js
      8. ResetTextMessage.js

  • components (view 담당)

    • auth
      1. Login.js
      2. TakeTextMessage.js
      3. CheckCertificate.js
      4. TakeIdCard.js
      5. TakeVaccinePass.js
      6. SetPassword.js
      7. ResetPassword.js
      8. ResetTextMessage.js

  • screens (구현 스크린)

    • AuthStack
      1. Login.js
      2. TakeTextMessage.js
      3. CheckCertificate.js
      4. TakeIdCard.js
      5. TakeVaccinePass.js
      6. SetPassword.js
      7. ResetPassword.js
      8. ResetTextMessage.js
    • HomeStack
      1. MyCretificate.js
    • SettingStack
      1. RegisterNVP.js (CheckCertificate와 같음)

🖥 store

redux로부터 createStore, applyMiddleware함수를 가져오고 redux-thunk로부터 thunk를 가져와 미들웨어를 적용한 스토어를 생성한다.

• store/store.js

import { createStore, applyMiddleware } from "redux";
import rootReducers from "./reducers/rootReducers";
import thunk from 'redux-thunk'

const store = createStore(rootReducers, applyMiddleware(thunk));

export default store;

🖥 actions

REST API

const USER_URL : "api/user"

• 간편 비밀번호 로그인 GET
• 핸드폰 문자 인증 GET, POST
• 문자 인증 유효시간
• 신분증 등록 POST
• 백신 증명서 등록 POST
• 간편 비밀번호 설정 POST
• 간편 비밀번호 재확인 GET
• 비밀번호 변경시 문자 인증 GET, POST
• 비밀번호 재설정PUT

actionTypes.js

• state만! 관련있는 action은 type이 하나이다.

//password
export const SET_PASSWORD = "SET_PASSWORD";
export const RESET_PASSWORD = "RESET_PASSWORD";
//idCard
export const REGISTER_ID_CARD = "REGISTER_ID_CARD";
export const REGISTER_VACCINE_PASS = "REGISTER_VACCINE_PASS";
//re_password
export const CONFIRM_PASSWORD = "CONFIRM_PASSWORD";
export const MODIFY_PASSWORD = "MODIFY_PASSWORD";

• api 통신과 관련된 action은 _SUCCESS, _FAILURE를 추가하여 redux-thunk를 적용할 수 있도록 한다.

//login
export const LOGIN = "LOGIN";
export const LOGIN_SUCCESS = "LOGIN_SUCCESS";
export const LOGIN_FAILURE = "LOGIN_FAILURE";
//autoLogin
export const AUTO_LOGIN = "AUTO_LOGIN";
export const AUTO_LOGIN_SUCCESS = "AUTO_LOGIN_SUCCESS";
export const AUTO_LOGIN_FAILURE = "AUTO_LOGIN_FAILURE";

🖥 reducers

모든 reducer를 가져와 combineReducers로 한번에 root를 만들어준다

• reducers/rootReducer.js

import { combineReducers } from "redux";
import loginReducer from "./login";
import authReducer from "./auth";
import userReducer from "./user";
const rootReducers = combineReducers({
    login: loginReducer
    auth: authReducer,
    user: userReducer,
});

export default rootReducers;