Redux

Redux 란?

• ‘상태 관리 라이브러리'로서, 컴포넌트와 상태를 분리하여 상태를 좀 더 효율적으로 활용할 수 있게끔 해준다.
• React에 종속된 라이브러리가 아니기 때문에, 별개로 사용이 가능하다.

 

언제 사용하는 것이 좋을까?

• Redux를 이용하지 않는 경우
  : 최상위 컴포넌트가 특정 상태를 사용하지 않음에도 다른 하위 컴포넌트로 해당 상태를 Props로 내려주기 위해 ‘상태 끌어올리기'로 최상위 컴포넌트를 거쳐 상태를 받아서 내려줘야한다 → 비효율적
  
  
• Redux 이용 시
  : 전역 상태 저장소인 ‘Store’를 사용하여 해당 상태를 ‘Store’를 통해 목표 컴포넌트로 직접 전달이 가능하다.

---

Redux의 순서 및 구조

Action(객체) → Dispatch(함수) → Reducer(함수) → Store

 

Action {}

• 객체 타입.
• 필수 프로퍼티 : type
• 대문자 및 Snake case로 작성. ex) ‘SET_NUMBER’

{ type: 'SET_NUMBER', payload: 5 }

• 액션 생성자(Action creater) 함수로 작성 가능.

const setNumber = (num) => {
	return {
		type: 'SET_NUMBER',
		payload: num
	}
}

 

Dispatch ()

• Action을 Reducer로 전달해주는 함수 → useDispatch 메서드를 통해 사용.
• 전달인자 : Action 객체

import { useDispatch } from 'react-redux'
const dispatch = useDispatch()

dispatch( {type: 'SET_NUMBER', payload: 5} );

// or

dispatch( setNumber(5) );

 

Reducer(currentState, Action)

• Dispatch에서 전달받은 Action의 type 값에 따라 상태를 변경시키는 함수.
• 순수 함수
• 2개의 매개 변수를 지님 : (currentState, action)

코드스테이츠 강의 자료 예시 코드를 그대로 작성해보고자 한다 :

const count = 1

// 초기 상태가 인자로 들어감.
const counterReducer = (state = count, action) {

	switch(action.type)    // if문 대신 작성하면, 훨씬 가독성이 높아짐.
		case 'INCREASE':
				return state + 1

		case 'DECREASE':
				return state -1

		case 'SET_NUMBER':
				return action.payload

		default:             // 해당 경우가 없을 경우, 기존 상태를 리턴.
				return state; 

}

• Reducer 함수가 다수인 경우 → combineReducers 메서드 사용

import { combineReducers } from 'redux';

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

 

Store

• 상태 관리 저장소
• createStore 메서드를 이용해 store 생성

import { createStore} from 'redux';

const store = createStore(rootReducer);   // createStore에 Reducer 함수를
																					// 전달인자로 넣어줌.

---

Redux Hooks

• 대표적인 Hooks
  : useSelector, useDispatch → 둘 다 ‘react-redux’에서 가져와야 함.

 

useSelector()

• 컴포넌트와 state를 연결시켜주는 메서드.
• Redux의 state에 접근할 수 있게 해준다.

import { useSelector } from 'react-redux'

const counter = useSelector(state => state.counterReducer)

// 1

 

useDispatch()

• Action을 Reducer로 전달해주는 메서드.

import { useDispatch } from 'react-redux'

const dispatch = useDispatch()

dispatch( setNumber(5) )

 

---

#느낀점

개념은 대강 이해했는데, 역시 직접 코드를 짜봐야 내 것이 될 것 같다.

특히, useSelector 메서드 부분이 명확하게 이해가 안간다. 이 부분은 과제를 통해 직접 코드를 짜봐야 할 듯.