Redux 리덕스(vs. Context API)

https://hanamon.kr/redux%EB%9E%80-%EB%A6%AC%EB%8D%95%EC%8A%A4-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC/

과정

1. Action (액션) 객체가 dispatch 메소드에 전달

2. dispatch를 통해 Reducer 호출

3. Reducer는 새로운 Store를 생성 (Store는 하나의 리듀서만 관리할 수 있지만 리듀서를 여러개 나눠서 하나로 합칠 수는 있다) // reducers 폴더 안에 reducers.js => 모든 리듀서를 합쳐준다.

 

Cotext API

Context API 와 useReducer Hook 을 사용해서 개발하는 흐름은 리덕스를 사용하는 것과 개발 방식이 유사하다.

단순히 글로벌 상태 관리를 위한 것이라면 Context API를 활용하는 것 만으로 충분하다.

 

https://react.vlpt.us/redux/

6장. 리덕스 · GitBook

 

1. 리덕스에서 사용되는 키워드 

 

 1) 액션 : 

액션 객체 (type필드는 필수, 그외는 개발자 선택)

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "리덕스 배우기"
  }
}

 

2) 액션 생성 함수

export function addTodo(data) {
  return {
    type: "ADD_TODO",
    data
  };
}

// 화살표 함수로도 만들 수 있습니다.
export const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});

 

3) 리듀서

function reducer(state, action) {
  // 상태 업데이트 로직
  return alteredState;
}

예시

function counter(state, action) {
  switch (action.type) {
    case 'INCREASE':
      return state + 1;
    case 'DECREASE':
      return state - 1;
    default:
      return state;
  }
}

리덕스의 리듀서에서는 기존 state를 그대로 반환하도록 작성해야한다.

 

4) 스토어

리덕스에서는 한 애플리케이션당 하나의 스토어를 만들게 됩니다. 스토어 안에는, 현재의 앱 상태와, 리듀서가 들어가있고, 추가적으로 몇가지 내장 함수들이 있다.

 

5) 디스패치

디스패치는 스토어의 내장함수 중 하나이다. 디스패치는 액션을 발생 시키는 것 dispatch 라는 함수에는 액션을 파라미터로 전달한다. ex) dispatch(action) 

그렇게 호출을 하면, 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어줍니다.

 2. 리덕스의 3가지 규칙

1) 하나의 애플리케이션 안에는 하나의 스토어가 있다.

2) 리액트에서 state를 업데이트 할 때 setState를 사용, 배열을 업데이트 할 때 기존 배열에 push하지 않고 concat으로 새로운 배열을 만든다. 깊은 구조로 되어있는 객체를 업데이트할 때도 기존의 객체는 건드리지 않고 Object.assign or spread연산자를 사용한다. 

3)리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다. 이전의 상태는 절대로 건드리지 않고 변화를 일으킨 새로운 상태 객체를 만들어서 반환한다. 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환해야한다. 

 

 

https://hanamon.kr/redux%EB%9E%80-%EB%A6%AC%EB%8D%95%EC%8A%A4-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC/

Redux(리덕스)란? (상태 관리 라이브러리) - 하나몬

3. immutable.js를 사용하는 이유

https://velopert.com/3486

React ❤️ Immutable.js – 리액트의 불변함, 그리고 컴포넌트에서 Immutable.js 사용하기 | VELOPERT.LOG

3-1. immer를 사용한 불변성 유지

전개 연산자와 배열의 내장함수를 이용하여 배열 혹은 객체를 복사하고 새로운 값을 덮어쓰기 어려울 때

(= 객체의 구조가 깊어지면서 불변성을 유지하며 업데이트 하는 것 어려워질 때)

immer를 사용함.

import produce from 'immer';
const nextState = produce(originalState, draft => {
 // 바꾸고 싶은 값
  draft.somewhere.deep.inside = 5;
  })
 // produce는 첫 번째 파라미터 = 수정하고 싶은 상태, 두 번째 파라미터 = 상태를 어떻게 업데이트할지

4. createStore -> deprecated 대안 3가지

https://velog.io/@201_steve/redux-createStore-deprecated

redux createStore deprecated ?!