리덕스2

• 

  리액트 로그인 패턴 (with Redux, Axios) 리액트로 로그인 기능을 구현하는 패턴을 알아보겠다. 1. 우선 로그인 기능을 구현하는 feature폴더의 login.tsx 2. feature안에서 실질적으로 값들을 입력받아 async함수로 api를 호출한 값을 토대로 데이터를 가공하는 useLoginForm 커스텀 훅 3. 유저에 관한 서비스이므로 AuthService 클래스에 존재하는 login 함수 = 실제로 axios를 통해 api를 호출하는 함수 4. Redux를 이용한 상태관리를 할 것이므로 api로 받아온 데이터의 값에 따라 상태를 변경해 줄 리듀서와 acion들 5. Redux-saga를 이용한 middleware 1. feature 폴더의 login.tsx에는 로그인에 관련된 기능을 적어준다. 클라이언트가 직접 form에 id와 pass.. front-end/react 2022. 2. 18.

• 

  React+Redux(2) 1. Store의 값 가져오기 react는 redux의 store에서 관리되고 있는 state 값을 가져오는 hook을 제공한다. 이는 useSelector()라는 hook이다. 2. useSelector()의 사용법 store의 상태를 반환하려면 redux에서 제공하는 store안에 들어있는 (configureStore함수로 정의되어 있는 store 객체 안에 들어있는) getState함수가 필요하다. 또한 우리는 typescript환경에서 getState를 사용할 것이므로 store.getState()함수로 반환되는 type을 지정해주어야한다. 따라서 RootState를 다음과 같이 store.getState()함수의 ReturnType으로 지정한다. 그 후 useSelector()hook에서 사용할.. front-end/react 2022. 2. 10.