Redux

수많은 컴포넌트 사이에 state공유 및 상태관리를 편리하게 하기 위해서 사용하는 Javascript 라이브러리

Redux 세팅하기

1. 일단 yarn add react-redux(?) 로 패키지 설치!
2. 설치가 완료되면 index.js에서 redux에서 제공하는 클래스들을 추가해준다.
   import { Provider } from "react-redux"
3. 컴포넌트를 감싸주기
   
4. 관리할 state들을 선언해준다 createStore
   
   여기서는 하나의 state만 저장했다.
   
   
   

---

참고__createStore의 정의

1. 상태 트리를 위한 redux store를 만든다.
2. 유일하게 변경할 수 있는 방법은 dispatch()를 사용해야만 한다.
3. app에서 하나만 있을 수 있지만, combineReducers를 통해 몇가지의 리듀서를 single로 합칠 수 있다.

---

Redux 사용하기

5. state저장은 했고, 사용은 어떻게 ?
   1. 함수 ! 를 정의한다.
      
   2. connect함수 !
      import { connect } from "react-redux"
export default connect(state를props화)(Cart)
      state에 store의 모든 데이터가할당된다.
   3. 사용하고 싶은 컴포넌에서 props.state(할당한 이름)로 사용하면 된다. props를 반드시 해줘야 함!

Redux 사용하기 (데이터관리)

index.js

1. reducer라는 함수를 만든다.

2. 매개변수로 state=아무개, action 을 설정한다.

3. action.type=='수량증가'를 예로 들면

   1. [...state] : 스프레드 연산자로 copy에 복사 할당한다.
   2. copy[0].quan++; : 0번째 state해당 하는 quan인스턴스를 증가시킨다.

   

Cart.js

4. 컴포넌트에서는 dispatch함수를 사용한다.
   1. type 정의
   
   
5. state 성격이 달라서 Reducer를 또 하나 만들 수 있다. combineReducers({})
   combineReducers({reducer, reducer2})
   나머지 사용은 동일하지만
   props를 바꿔주면서 약간의 변화가 생긴다.
   

주의할 점

store는 모든 state를 저장하는 곳이 아님.
모달창과 같은 일회용 state들은 useState를 사용해서 관리하는게 더 낫다.

store에 데이터를 보내는 것도 가능하다!

개발환경에서 새로고침하면 redux도 초기화 된다.
개발환경에서 페이지 이동시 강제새로고침이 되지 않게 하려면 ?
history.push() 사용!

--- 5.22 ---

파일구조

1. action폴더

   애플리케이션에서 사용하는 명령어 (action type), API통신과 같은 작업을 하는 액션 메서드를 모아둔 폴더
   

2. reducer폴더

   리듀서로 구서된 폴더.

   리듀서 : 액션메서드에서 변경한 상태를 받아 기존의 상태를 새로운 상태로 변경하는 일을 한다.
   

   index.js 에서는 분리한 리듀서를 합친다.

   파일갯수가 많아진다면 ducks기법을 고려해볼 수도 있다.

3. component폴더 (도메인별로 구분)

   1. 컨테이너 컴포넌트

      여러개의 프레젠테이션 컴포넌트로 구성. 데이터나 공통으로 관리해야 하는 객체, 컴포넌트간의 인터랙션등을 관리하는 컴포넌트

   2. 프레젠테이션 컴포넌트

      일반적인 UI컴포넌트

   일반적으로 프레젠테이션 컴포넌트에는 비즈니스 로직이 없다. 비즈니스 로직은 컨테이너 컴포넌트에서 개발해야 재활용성이 높아진다.

4. store폴더

   index.js 폴더 하나만 있다. 주로 미들웨어를 설정하는 일을 한다.

   비통기 통신 -> redux-thunk 라이브러리,

   State 변경 내역 관리 ->react- router-redux 라이브러리

   디버깅 -> react-devtool 설정

Middleware

실제 프로젝트에서는 미들웨어를 직접 만들어서 사용하는 경우는 많지않다.

redux-thunk

비동기작업 처리할 때 사용하는 미들웨어

객체 대신 함수를 생성하는 액션 생성함수를 작성할수 있게 해준다.

redux-promise & redux-promise

두가지가 필요한 이유 ?

redux 를 잘 사용할 수 있도록

어떻게 ?

redux 는 redux store가 존재하고, 모든 state를 관리한다.

store안의 state를 변경하려면 dispatch를 이용해서 action으로 변경할 수 있다.

store에서는 항상 객체형식으로 된 action을 받는것이 아닌, Promise형식 또는 function형태로 받을 수도 있다.

Promise형식 또는 function형태로 오면 redux store가 받지를 못한다.

redux-thunk는 dispatch에게 function을 받는 방법을 알려주고,

redux-promise는 promise를 어떻게 대처하는지 알려준다.

Async await

Promise then.... promise then... promise then... 반복 --> 난잡한 코드가 될 수 있다

깔끔하게 promise를 사용하기 위해 Async await이 도움이 될 수 있다. syntatic sugar

비동기처리 참고

--5.13--