Redux

1. Redux?

- 자바스크립트 애플리케이션을 위한 상태 관리 라이브러리; State를 관리

- 주의: Redux는 React 없이도 사용할 수 있는 상태 관리 라이브러리

 

1-1. Redux이 세 가지 원칙

1-1.1) Single source of truth

- 동일한 데이터는 항상 같은 곳에서 가지고 와야 한다는 의미-> Redux에는 데이터를 저장하는 Store라는 단 하나뿐인 공간이 있음과 연결이 되는 원칙

1-1.2) State is read-only

- 상태는 읽기 전용이라는 뜻 -> React에서 상태갱신함수로만 상태를 변경할 수 있었던 것처럼, Redux의 상태도 직접 변경할 수 없음을 의미 즉, Action 객체가 있어야만 상태를 변경할 수 있음과 연결되는 원칙

1-1.3) Changes are made with pure functions

- 변경은 순수함수로만 가능하다는 뜻으로, 상태가 엉뚱한 값으로 변경되는 일이 없도록 순수함수로 작성되어야하는 Reducer와 연결되는 원칙

 

2. State vs Props

2-1. State

- 부모 컴포넌트에서 자식 컴포넌트로 데이터 교환하는 것이 아닌 State를 이용해서 컴포넌트 안에서 데이터를 교환이 가능하다.

- State 자체를 변경할 수 있다.

- State를 바꾸면 컴포넌트가 다시 re-rende된다.

state = {
message: '',
attachFile: undefined,
openMenu: flase,
};

2-2. Props

- Properties의 줄임말

- 구성 요소가 서로 통신하는 방법

- 상위 구성 요소에서 아래쪽으로 흐른다 -> 부모 컴포넌트에서 자식 컴포넌트로 전달

- 자식 컴포넌트의 Props를 변경하려면 부모 컴포넌트의 State를 변경해야 한다.

<ChatMessages
messages={messages}
currentMember={member}
/>

3. Redux 데이터 흐름 (상태 관리 순서)

• 3-1. 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됩니다.
• 3-2. 이 Action 객체는 Dispatch 함수의 인자로 전달됩니다.
• 3-3. Dispatch 함수는 Action 객체를 Reducer 함수로 전달해줍니다.
• 3-4. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경합니다.
• 3-5. 상태가 변경되면, React는 화면을 다시 렌더링 합니다.

3-1. ACTION

- 어떤 액션을 취할 것인지 정의해 놓은 객체

- 수행하는 작업의 유형을 지정하는 'type' 속성이 있다. -> type 은 필수로 지정(Action 객체가 어떤 동작을 하는지 명시해주는 역할)

- 선택적으로 redux 저장소에 일부 데이터를 보내는데 사용되는 'payload'속성(구체적인 값을 전달)을 가질 수도 있다.

- 대문자와 Snake Case로 작성

// payload가 필요 없는 경우
{ type: 'INCREASE' }

// payload가 필요한 경우
{ type: 'SET_NUMBER', payload: 5 }


{type: ‘LIKE_ARTICLE’, articleId: 42}
{type: ‘FETCH_USER_SUCCESS’, response: {id: 3, name: ‘Mary’} }
{type: ‘ADD_TODO’, text: ‘Read the Redux docs.’}

3-2. REDUCER

- Dispatch에게서 전달받은 Action 객체의 type 값에 따라서 상태를 변경시키는 함수

- 애플리케이션 상태의 변경 사항을 결정하고 업데이트된 상태를 반환한다.

- 인수로 조치를 취하고 store내부의 상태를 업데이트한다.

- 이 때, Reducer는 순수함수여야 한다.

   -> 외부 요인으로 인해 기대한 값이 아닌 엉뚱한 값으로 상태가 변경되는 일이 없어야함

const count = 1

// Reducer를 생성할 때에는 초기 상태를 인자로 요구합니다.
const counterReducer = (state = count, action) => {

  // Action 객체의 type 값에 따라 분기하는 switch 조건문입니다.
  switch (action.type) {

    //action === 'INCREASE'일 경우
    case 'INCREASE':
			return state + 1

    // action === 'DECREASE'일 경우
    case 'DECREASE':
			return state - 1

    // action === 'SET_NUMBER'일 경우
    case 'SET_NUMBER':
			return action.payload

    // 해당 되는 경우가 없을 땐 기존 상태를 그대로 리턴
    default:
      return state;
	}
}
// Reducer가 리턴하는 값이 새로운 상태가 됩니다.

아래처럼, 만약 여러 개의 Reducer를 사용하는 경우, Redux의 combineReducers 메서드를 사용해서 하나의 Reducer로 합쳐줄 수 있다.

import { combineReducers } from 'redux';

const rootReducer = combineReducers({
  counterReducer,
  anyReducer,
  ...
});

(previousState, action) => nextState
// 이전 State와 action object를 받은 후에 next state를 return한다.

3-3. Redux Store

- 상태가 관리되는 오직 하나뿐인 저장소의 역할 -> Redux 앱의 state가 저장되어 있는 공간

- 이들을 하나로 모으는 객체 저장소는 애플리케이션의 전체 상태 트리를 보유

- 내부 상태를 변경하는 방법은 해당 상태에 대한 Action을 전달

- Redux Store은 클래스가 아닌 Methods가 있는 객체

 

3-3.1) createStore 메서드를 활용해 Reducer를 연결해서 Store를 생성

import { createStore } from 'redux';

const store = createStore(rootReducer);

3-4. Redux Hooks 메서드

3-4.1) useDispatch()

- useDispatch() 는 Action 객체를 Reducer로 전달해 주는 Dispatch 함수를 반환하는 메서드

- Dispatch를 설명할 때 사용한 dispatch 함수도 useDispatch()를 사용

import { useDispatch } from 'react-redux'

const dispatch = useDispatch()
dispatch( increase() )
console.log(counter) // 2

dispatch( setNumber(5) )
console.log(counter) // 5

3-4.2) useSelector()

- useSelector()는 컴포넌트와 state를 연결하여 Redux의 state에 접근할 수 있게 해주는 메서드

// Redux Hooks 메서드는 'redux'가 아니라 'react-redux'에서 불러옵니다.
import { useSelector } from 'react-redux'
const counter = useSelector(state => state)
console.log(counter) // 1

Redux 공식문서 / React-Redux 공식문서