Redux Concept

😊 리덕스는 왜 사용?

• 리액트에서 상태를 더 효율적으로 관리하는 데 사용하는 상태 관리 라이브러리.
• 지금까지의 상태 관리의 로직은 상태 관리를 쉽게 하기 위해 모두 App 컴포넌트에서 진행해왔음.
• App에서 모든 로직을 관리하고 있기 때문에 App 컴포넌트의 state를 업데이트하면 App 컴포넌트가 리렌더링되고, 하위 컴포넌트도 모두 리렌더링.
• 작은 프로젝트에서는 상관 없지만, 프로젝트의 규모가 커질수록 관리가 힘듦.
• 이런 문제점을 리덕스라는 상태 관리 도구를 사용하여 해결!!!!👍

😀 리덕스란?

• 상태 관리의 로직을 컴포넌트 밖에서 처리하는 것.
• 스토어라는 객체 내부에 상태를 담게 됨.
• 액션(action)
  • 상태에 어떤 변화를 일으켜야 할 때 스토어에 전달.
  • 객체 형태. 상태를 변화시킬 때 이 객체를 참조하여 변화를 일으킴.
• 디스패치(dispatch)
  • 액션을 전달하는 과정.
  • 스토어가 액션을 받으면 리듀서(reducer)가 전달받은 액션을 기반으로 상태를 어떻게 변경시켜야 할지 정함.
  • 액션을 처리하면 새 상태를 스토어에 저장.

✔ 새로운 용어 정리
1. 스토어 : 애플리케이션의 상태 값들을 내장.
2. 액션 : 상태 변화를 일으킬 때 참조하는 객체.
3. 디스패치 : 액션을 스토어에 전달하는 것을 의미.
4. 리듀서 : 상태를 변화시키는 로직이 있는 함수.
5. 구독 : 스토어 값이 필요한 컴포넌트는 스토어를 구독.

🧨 리덕스는 리액트에 의존 ❌ -> 리액트를 사용하지 않아도 리덕스 사용 가능.

😁 리덕스 사용.

🎁 액션(Action)

{
  type: "INCREMENT"
}

• 다음 예시는 상태의 값의 수치를 올림.
• 액션에서 type 값은 필수고, 나머지는 선택.
• 앞에서 일정 만드는 액션은??

{
  type:'INSERT_TODO',
  todo: {
    id:1,
    text: '리액트 배우기',
    done:false
  }
}

😥 액션을 새로 만들 때마다 직접 객체를 만들면 불편.

😀 액션 생성 함수를 사용하면 편리.

👍 액션 생성 함수를 사용하기 위한 방법.

1. 액션 타입을 상수 값으로 정의

const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

2. 액션 생성 함수

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

3. 함수 호출

increment(1)
decrement(1)

4. dispatch로 액션 전달.
   store.dispatch(increment(1));

🎁 리듀서

• 상태에 변화를 일으키는 함수.
• 두 개의 파라미터를 받음
  1. 현재 상태
  2. 액션 객체
• 함수 내부에서는 switch 문을 사용하여 action.type에 따라 새로운 상태를 만들어서 반환.
• 리듀서가 초기에 사용할 초기 상태 initialState 값부터 먼저 설정해야 함.

const initialState = {
  number:0,
  foo:'bar',
  baz:'qux'
};

리듀서 함수

function counter(state = initialState, action){
  switch(action.type){
    case INCREMENT:
      return Object.assign({}, state,
            { number: state.number + action.diff});
    case DECREMENT:
      return Object.assign({}, state,
            { number: state.number - action.diff});
    default:
      return state;
  }
}

• state = initialState : state 값이 undefined라면 initialState를 기본 값으로 사용한다는 의미.
• 리덕스 또한 리액트와 같이 state를 직접 수정❌
• Object.assign : 파라미터로 전달된 객체들을 순서대로 합쳐줌.
  역순으로 객체를 왼쪽으로 덮어쓰면서 원하는 상태를 지닌 새 객체 만듬.

return{
  ...state,
  number: state.number + action.diff}

로도 가능.👌

🎁 리덕스 스토어

• 액션, 리듀서가 존재하면 스토어 생성 가능.

const {createStore} = Redux;
const store = createStore(counter);

• 나중에 실제로 프로젝트에 불러올 때는 import {createStore} from 'redux';
• 스토어를 생성할 때는 createStore 함수 사용.
  • 1번째 파라미터 : 리듀서 함수
  • 2번째 파라미터 : 해당 값을 스토어의 기본 값으로 사용.
  • 2번째 생략시 : 리듀서 초깃값을 스토어 기본 값으로.

🎁 구독

• 리덕스를 구독: 리덕스 스토어의 상태가 바뀔 때마다 특정 함수를 실행시킨다는 의미.
• subscribe 함수 사용.
• unsubscribe : 구독 취소

🧨 리덕스 세 가지 규칙

1. 스토어는 단 한개
2. state는 읽기 전용
   • Object.assign 사용하여 업데이트
3. 변화는 순수 함수로 구성.

참고 : <리액트를 다루는 기술>