Skip to main content

10. Redux

리덕스란?#

  • Redux is a predictable state container for JavaScript apps.
  • 자바스크립트 애플리케이션을 위한 상태 관리 라이브러리 입니다.

Props#

  1. properties의 줄임말
  2. Props는 구성 요소가 서로 통신하는 방법입니다.
  3. props는 상위 구성 요소에서 아래쪽으로 흐릅니다.
  4. 해당 값을 변경하려면 자식 관점에서 Props를 변경할 수 있으며, 부모는 내부 상태를 변경해야 합니다.

State#

  1. parent component에서 child component로 data를 보내는게 아닌 그 component 안에서데이터를 전달하려면? State으로 예를 들어서 검색 창에 글을 입력할떄 글이 변하는것은 state을 바꿈
  2. State is mutable
  3. State 이 변하면 re-render 됩니다.

그래서 Redux는 State을 관리하는 것

Redux Data Flow

  • Reducer는 pure function이기에 reducer 내부에서 하지 말아야 할것들 !!!
    • Mutate its arguments
    • Perform side effects like API calls and routing transistions
    • Call non-pure functions (ex. Date.now(), Math.random())

Redux Store#

  • 이들을 하나로 모으는 객체 저장소는 애플리케이션의 전체 상태 트리를 보유합니다.
  • 내부 상태를 변경하는 유일한 방법은 해당 상태에 대한 Action을 전달하는 것입니다.
  • Redux Store는 클래스가 아닙니다. 몇 가지 Methods가 있는 객체일 뿐입니다.

미들웨어 없이 리덕스 카운터 앱 만들기#

  • npx create-react-app my-app --template typescript
  • npm install redux --save

CreateStore()#

  • 앱의 전체 상태 트리를 보유하는 Redux 저장소를 만듭니다. 앱에는 하나의 스토어만 있어야 합니다.

getState()#

  • getstate
  • 애플리케이션의 현재 상태 트리를 반환합니다. 스토어의 리듀서가 반환한 마지막 값과 같습니다

subscribe()#

  • subscribelistener
  • change listener를 추가합니다. 작업이 전달될 때마다 호출되며 상태 트리의 일부가 잠재적으로 변경되었을 수 있습니다. 그런다음 getState()를 호출하여 콜백 내부의 현재 상태 트리를 읽을 수 있습니다

combineReducers#

root reducer와 sub reducer#

  • 현재까지 counter 리듀서만 있는데 하나를 더 추가해주려면 Root 리듀서를 만들어서 그 아래 counter와 todos라는 서브(sub)리듀서를 넣어주면 됩니다.
  • Root 리듀서를 만들 때 사용하는 것이 combineReducers 입니다.

Redux Provider#

Provider란?#

  • <Provider> 구성 요소는 Redux Store 저장소에 액세스해야 하는 모든 중첩 구성 요소에서 Redux Store 저장소를 사용할 수 있도록 합니다.
  • React Redux 앱의 모든 React 구성 요소는 저장소에 연결할 수 있으므로 대부분의 응용 프로그램은 전체 앱의 구성 요소 트리가 내부에 있는 최상위 수준에서 <Provider>를 렌더링합니다.
  • 그런 다음 Hooks 및 연결 API는 React의 컨텍스트 메커니즘을 통해 제공된 저장소 인스턴스에 액세스할 수 있습니다.

Provider를 렌더링#

  • React Redux 앱의 모든 React 구성 요소는 저장소에 연결할 수 있으므로 대부분의 응용 프로그램은 전체 앱의 구성 요소 트리가 내부에 있는 최상위 수준에서 <Provider>를 렌더링합니다.

useSelector & useDispatch#

provider로 둘러 쌓인 컴포넌트에서 store접근#

  • 리액트에 Hooks가 있듯이 리덕스에도 Hooks가 있는데 그게 바로 useSelector와 useDispatch입니다. 이 두 개를 이용해서 provider로 useSelector Hooks를 이용해서 스토어의 값을 가져올 수 있습니다.

리덕스 미들웨어#

리덕스 미들웨어란?#

  • Redux 미들웨어는 액션을 dispatch전달하고 리듀서에 도달하는 순간 사이에 사전에 지정된 작업을 실행할 수 있게 해주는 중간자입니다.
  • 로깅, 충돌 보고, 비동기 API와 통신, 라우팅 등을 위해 Redux 미들웨어를 사용합니다.

redux-middleware

리덕스 로깅 미들웨어 생성하기#

  • 리덕스를 이용할 때 나오는 로그를 찍어주는 미들웨어를 생성
const loggerMiddleware = (store: any) => (next: any) => (action: any) => {
console.log("store", store);
console.log("action", action);
next(action);
};
const middleware = applyMiddleware(loggerMiddleware);
  • applyMiddleware는하나혹은더많은미들웨어를받은후에함수를리턴하는함수입니다

Redux Thunk#

리덕스 Thunk란?#

  • 리덕스를 사용하는 앱에서 비동기 작업을 할 때 많이 사용하는 방법이 redux-thunk 입니다.
  • 이것도 앞서 만들어본 logger 미들웨어 처럼 리덕스 미들웨어이며, 리덕스를 개발한 D Ab 가 만들었습니다

Thunk 용어는?#

  • "thunk"라는 단어는 "일부 지연된 작업을 수행하는 코드 조각"을 의미하는 프로그래밍 용어입니다. 지금 일부 논리(logic)를 실행하는 대신 나중에 작업을 수행하는 데 사용할 수 있는 함수 본문이나 코드를 작성할 수 있습니다.

비동기 작업을 해야 할 때는...???#

  • 여러 경우가 있지만 서버에 요청을 보내서 데이터를 가져올 때 주로 비동기 요청을 보냅니다.

에러가 나는 이유는?#

  • 원래 Actions은 객체여야 하는데 현재는 함수를 Dispatch 하고 있습니다. 그러기 때문에 나는 에러입니다. 그래서 함수를 dispatch 할 수 있게 해주는 Redux-Thunk 미들웨어를 설치해서 사용해보겠습니다.
  • npm install redux-thunk --save

결론#

  • 이렇게 리덕스 던크를 사용함으로써 액션 생성자가 그저 하나의 액션 객체를 생성할 뿐 아니라 그 내부 안에서 여러 가지 작업도 할 수 있게 만들어 줍니다.

리덕스 익스텐션 추가하기#

리덕스 익스텐션이란#

  • Redux-Devtools는 Redux 앱을 위한 디버깅 플랫폼을 제공합니다. 이를 통해 시간 여행 디버깅 및 라이브 편집을 수행할 수 있습니다.
  • 공식 문서의 일부 기능은 다음과 같습니다.
    • 모든 상태 및 작업 페이로드를 검사할 수 있습니다.
    • 작업을 "취소"하여 시간을 되돌릴 수 있습니다.

설치 방법#

  1. 익스텐션 설치하기

  2. 패키지 설치하기

    • npm install redux-devtools-extension --save

리덕스 툴킷에서는...#

  • devTools를 위한 파라미터가 있는데 기본적으로 사용을 할수있게 설정되어있습니다.
  • configureStore

리덕스 툴킷(redux toolkit)#

리덕스 툴킷#

  • Redux 툴킷은 Redux 로직을 작성하기 위한 공식 권장 접근 방식입니다. Redux 코어를 둘러싸고 있으며 Redux 앱을 빌드하는 데 필수적이라고 생각하는 패키지와 기능이 포함되어 있습니다.
  • Redux 툴킷은 제안된 모범 사례를 기반으로 하여 대부분의 Redux 작업을 단순화하고 일반적인 실수를 방지하고 Redux 애플리케이션을 더 쉽게 작성할 수 있도록 합니다.
  • redux toolkit

REDUCER#

  • 리듀서는 애플리케이션 상태의 변경 사항을 결정하고 업데이트된 상태를 반환하는 함수입니다. 그들은 인수로 조치를 취하고 store 내부의 상태를 업데이트합니다.

React 컴포넌트에서 Redux State 및 Actions 사용#

  • useSelector : useSelector를 사용하여 저장소에서 데이터를 읽고
  • useDispatch : useDispatch를 사용하여 Action을 전달할 수 있습니다.
Edit this page
Last updated on