Redux 개념이해

개념

리덕스는 리액트에서 사용하기위해 만든 상태 관리 라이브러리이다.

상태 관리에 있어서 불필요한 리렌더링 부분을 없애기 위해서 컴포넌트 외부에서 상태관리 로직을 처리한다.

리덕스를 사용하면 스토어에서 모든 상태 관리가 일어나는데,

상태에 어떤 변화를 일으킬 때 액션을 스토어에 전달하고, 그 과정을 디스패치라고 한다.

스토어가 액션을 받으면 리듀서가 액션을 기반으로 상태를 어떻게 변경할지 정하고,

액션을 처리하면 새 상태를 스토어에 저장한다.

스토어 안에 있는 상태가 바뀌면 스토어를 구독하고 있는 컴포넌트에게 바로 전달하고,

이때 부모 컴포넌트로 props를 전달하는 작업은 하지 않고, 리덕스에 연결하는 함수를 사용해서 컴포넌트를 스토어에 구독시킨다.

용어

• 스토어: 앱의 상태 값들을 저장하고 있다.
• 액션: 상태 변화를 일으킬 때 참조하는 객체이다.
• 디스패치: 액션을 스토어에 전달하는 것을 의미한다.
• 리듀서: 상태를 변화시키는 로직이 있는 함수이다.
• 구독: 스토어 값이 필요한 컴포넌트는 스토어를 구독한다.

 

액션과 액션생성함수

액션=객체, 반드시 type값을 가지고 있어야한다.

액션생성함수는 액션을 만들 때마다 직접 객체를 만드는데 있어서 불편하므로, 함수를 만든다.

 

리듀서

리듀서=상태에 변화를 일으키는 함수,

파라미터를 2개 받는다. 첫 번째 파라미터는 현재상태, 두 번째 파라미터는 액션 객체이다.

리듀서가 초기에 사용할 초기 상태 initialState값을 먼저 설정해야한다.

리덕스에서 상태를 업데이트할때는 새로운 객체를 만든 후, 그 안에 상태를 정의해야한다.

이때 Object.assign을 사용한다.

(객체를 왼쪽으로 덮어쓰면서 우리가 원하는 상태를 지닌 새 객체를 만들어 준다.)

(전개연산자(...)를 사용하면 더 깔끔하다.)

 

 

리덕스 스토어 생성

import  { createStore } from ‘redux’;

스토어 생성 시, createStore 함수를 사용한다.

파라미터를 2개 사용한다. 첫 번째 파라미터는 리듀서 함수, 두 번째 파라미터는 해당 값을 스토어의 기본 값으로 사용한다.

 

 

구독

react-redux의 connect함수가 대신한다.

 

dispatch로 액션 전달

스토어에 액션을 넣을 때 store.dispatch 함수를 사용한다.

 

 

< 리덕스의 3가지 규칙 >

1. 스토어는 1개이다.
   -> 스토어는 하나만 있어야 하고, 대신 리듀서를 여러 개 만들어 관리할 수 있다.
2. state는 읽기 전용이다.
   -> 리덕스의 상태인 state는 읽기 전용이다.
   상태를 업데이트할 때는, 항상 새 상태 객체를 만들어서 넣어 주어야 한다.
   
   
3. 변화는 순수 함수로 구성한다.
   -> 리듀서 함수에서 결과 값을 출력할 때는 파라미터 값에만 의존해야 하고, 같은 파라미터는 언제나 같은 결과를 출력해야 한다.
   -> 예를 들어 현재 날짜를 반환하는 newDate()함수나 Math.random()함수를 사용하면 안된다.

provider->state

header->dispatch

provider에서 store를 만들고, reducer를 저장하는 공간을 만든다.