[리액트를 다루는 기술] 12. 리덕스 개념이해

1. 리덕스

- 리액트에서 상태를 더욱 효율적으로 관리하는데 사용하는 상태 관리 라이브러리

- 상태 관리 로직을 컴포넌트 밖에서 처리함

- 리덕스를 사용하면 스토어라는 객체 내부에 상태를 담게 된다. 

- 리액트에서 만든 상태관리 라이브러리

2. 리덕스 구조

- 컴포넌트에서 액션을 리듀서로보낸다. -> 디스패치

- 리듀서는 스토어를 통해 구독한 컴포넌트에 상태를 전달한다.

- 컴포넌트 액션 -> 스토어> 리듀서 -> 스토어 -> 구독 된 컴포넌트

- 액션은 객체 형태로 되어있음

- 상태를 변화시킬때는 액션 객체를 참조하여 변화를 일으킴

- 액션을 전달하는 과정을 디스패치(dispatch)라고 함

- 스토어가 액션을 받으면 리듀서가 액션을 기반으로 상태를 상태를 어떻게 변경시켜야 할지 정함

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

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

- 리덕스에 연결하는 함수를 사용하여 컴포넌트를 스토어에 구독

3. 리듀서

- 상태를 변화시키는 로직이 있는 함수

4. JSBIN 활용

- www.jsbin.com

- cdn으로 리덕스 불러옴

5. 액션

- 액션은 스토어에서 상태 변화를 일으킬때 참조하는 객체임

- type 값을 반드시 가져야 함

- 어떤 작업을 하는지 정의

- 대문자와 밑줄을 조합하여 만듬

{ type: "INCREMENT" }

6. 액션 생성 함수(action creator)

const INCREMENT = 'INCREMENT'

const increment = (diff) => ({ type: INCREMENT, diff: diff });

console.log(increment(1));

-> {diff: 1, type:increment} 오브젝트 객체

7. 리듀서

- 상태에 변화를 일으키는 함수

- 파라미터를 2개를 받음

-> 첫번째는 현재상태

-> 두번째는 액션 객체

- 함수 내부에서는 switch문을 이용해 action.type에 따라 새로운 상태를 만들어서 반환해야함

- 리듀서가 초기에 사용할 초기상태 initialState를 설정

- const initialState = { num: 0 }

function counter(state= initialState, action){

switch(action.type){

case INCREMENT:

return {num: state.num + action.diff};

...

}

}

- state = initialState : ES6 문법 state 값이 undefined라면 initialState를 기본값으로 한다는 내용

8. object.assign

- return Object.assign({ }, state, { num: state.num - action.diff  });

-> 기존 state 값에 변경된 num을 변경해서 빈 오브젝트 객체( {} )에 값을 넣어줌

-> 이렇게 변경도 가능함: 전개 연산자 사용

return { ...state,    { num: state.num - action.diff    } 

9. 리덕스 스토어

- const { createStore } = Redux;

- concst store = createStore(counter);

-> 파라미터로는 couner라는 리듀서 함수가 들어감

-> 두번째 파라미터를 설정하면 해당값을 기본값으로 사용

-> 두번째 파라미터를 생략하면 리듀서 초기값을 스토어의 기본값으로 사용

10. 구독

- 리덕스 스토어를 구독하는 것은 connect  함수가 대신함

- 리덕스의 subscribe 함수를 직접적으로 사용할 일은 없음

- 리덕스를 구독한다는 의미?

-> 리덕스 스토어의 상태가 바뀔때마다 특정 함수를 실행시킴

-subscribe() 함수는 함수형태의 파라미터를 받음

- 파라미터로 전달된 함수는 스토어 상태에[ 변화가 일어날때 마다 호출

- subscribe 함수가 호출되면 반환값으로 구독을 취소하는 unsubscribe 함수를 반환함

- 나중에 취소할때는 unssubscribe() 함수를 호출

11. dispatch 로 액션 전달

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

-> store.dispatch(increment(1));

12. 리덕스의 3가지 규칙

1) 스토어는 단 1개

2) state는 읽기 전용

3) 변화는 순수 함수로 구성

1) 스토어는 단 1개

- 스토어는 단 1개

- 리듀서는 여러개를 만들어도 됨

2) state는 읽기 전용

- 이 값은 절대 수정하면 안됨

- 상태를 업데이트 할떄는 새 상태 객체를 만들어서 넣어주어야 함

3) 변화는 순수 함수로 구성

- 여기서 함수란 리듀서를 가르킴

- 결과값을 출력할때 파라미터 값에만 의존하고 같은 파라미터는 언제나 같은 결과값이 나와야함

- 리듀서 함수 내부에서 외부 네트워크와 

13. 정리

- 스토어에 상태 정보를 가진 객체를 넣어둠

- 액션이 디스패치 되었을 경우

- 리듀서 함수를 이용하여 상태를 변화시키는 것이 주요 역활

- 스토어에 변화가 일어날때마다 스토어에 구독된 함수를 실행시킴

"파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음"