Redux 겉핥기😛

- Redux 구성요소

• store : redux의 상태값을 갖는 객체 (전체 상태값은 오직 하나, store 객체 1개 뿐이다. readOnly)
• action : state를 변경시킬 행동 (trigger 역할)
• reducer : action이 발생했을 때 store에 접근해 상태를 변경시킬 함수

(*순수함수: 동일한 인풋=>동일한 아웃풋, 매번 다른 값을 불러일으키는 new Date(), fetch(), Math.Random()과 같은 함수는 리듀서에서 사용하면 안되고, 리듀서 외부의 한 변수에 의존하지 않도록 한다. 오로지 state와 action만 가져와 수정할 수 있도록~!
만약, 위와 같은 변수나 메서드호출이 필요한 상황이라면 컴포넌트 단에서 적용시키거나 미들웨어를 사용한다.)

- 유용한 hook

from 'redux'
createStore : 하나의 store를 생성, 리듀서를 인자로 받는다.
combineReducers : 여러 상태를 하나의 store 객체로 만들어 준다.

from 'react-redux'
Provider: store를 전역에서 사용할 수 있도록 가장 엔트리포인트를 <Provider store={store}><App/></Provider>과 같이 감싸준다. prop으로 store를 내려준다.
useSelector: store의 상태값을 불러와 사용할 수 있게 해준다.
useDispatch : dispatch 함수를 바로 사용할 수 있다. action을 인자로 받고, action이 발생할 때 dispatch가 실행된다.
shallowEqual : selector함수를 최적화 시킨다. useMemo와 비슷하다. (prevState와 nextState를 비교하여 차이가 있는지를 확인하는 함수이고, 차이가 생겼을 경우에만 렌더링을 허용한다.)

- Redux-DevTools-extension 🧡👍

:상태관리 및 예측에 유용하다.

- 폴더구조에 대해

리덕스를 학습하며 간단하게 카운터, 투두리스트, 모달을 구현해봤는데,
기본적으로는 뷰와 상태관리를 분리시키면서, 상태관리의 구조가 어떻게 되는지에 따라 구분해볼 수 있었다.

• 액션타입, 액션생성함수, 리듀서를 한 파일에 몰아서 정의한 구조 (Ducks패턴)
  : export 액션생성함수 , export default Function_Reducer

src
 ∟ components
	∟ Modal.js  //view에 해당하는 컴포넌트 모음
 ∟ container
	∟ ModalContainer.js 
	//selector, dispatch를 생성해 컴포넌트에 전달하는 컨테이너 역할
 ∟ modules
	∟ modal.js //action, reducer를 저장한 곳
 ∟ app

• 액션(타입/함수) / 리듀서를 분리하여 정의한 구조

src
 ∟ components
 	∟ Modal.js 
   //view에 해당하는 컴포넌트 
 ∟ store
 	∟ actions 
    		∟ modals.js      //action 생성자 함수
                ∟ modalsTypes.js //action type 정의
	∟ reducers
    		∟ modals.js  //reducer저장
∟ app

component에서 사용할 dispatch함수 및 필요한 상태를 selector로 직접 가져다 사용할 수도 있고 첫번째 폴더 구조에서 처럼 container를 두고 자식 컴포넌트에 prop으로 전달하는 방식으로 변경가능할 듯하다.

아직 리덕스가 익숙하지 않은 입장에서는 한 파일에 모든 상태와 관련 함수를 모아놓은 패턴이 더 보기 좋다는 생각이 든다. 작업 규모가 점점 커지면 두번째구조처럼 액션과 리듀서를 분리한 구조가 편리할 수도 있겠다는 생각이 든다.

[ 리덕스 미들웨어 ]

단방향 데이터 흐름, Flux Pattern에 해당된다.
액션 -> 미들웨어 -> 리듀서 ->스토어-> 뷰 컴포넌트 업데이트

• 주로 비동기 요청 시에 사용된다.(redux-thunk, redux-saga 주로 사용하는 라이브러리)

• action이 dispatch되다가 특정조건에 따라 다른 dispatch함수 및 자바스크립트함수를 실행하는 등 여러 구체적인 상황을 가능하게 해준다.

• Redux-saga : Generator에 기반한 미들웨어

  • Generator:
    함수의 흐름을 yield 을 통해 특정 구간에 멈춰놓았다가 next()로 다음 함수를 실행시킬 수 있으며, 결과값을 여러번 내보낼 수 있다.

    ---