코드스테이츠 블로깅 - Redux

Redux

React 없이도 사용할 수 있는 상태 관리 라이브러리이다.

Redux에서는 Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐르게 된다.

 

store

Store는 상태가 관리되는 오직 하나뿐인 저장소의 역할을 함. Redux 앱의 state가 저장되어 있는 공간이다.

 

Reducer

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

이 때, Reducer는 순수함수여야 함. 외부 요인으로 인해 기대한 값이 아닌 엉뚱한 값으로 상태가 변경되는 일이 없어야하기 때문

Action

Action은 말 그대로 어떤 액션을 취할 것인지 정의해 놓은 객체

const increase = () => {
  return {
    type: 'INCREASE'
  }
}

보통 이런식으로 Action 객체를 생성하는 함수를 만들어 사용하는 경우가 많다.

이러한 함수를 액션 생성자(Action Creator)라고도 함.

Dispatch

Dispatch는 Reducer로 Action을 전달해주는 함수. Dispatch의 전달인자로 Action 객체가 전달된다.

Action 객체를 전달받은 Dispatch 함수는 Reducer를 호출

// Action 객체를 직접 작성하는 경우
dispatch( { type: '증가' } );
dispatch( { type: 'SET_NUMBER', payload: 5 } );

// 액션 생성자(Action Creator)를 사용하는 경우
dispatch( increase() );
dispatch( setNumber(5) );

위에 개념들을 연결시켜주기 위해서 Redux Hooks를 이용해야 하는데 useSelector(), useDispatch() 두가지가 있다 

useDispatch()

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

import { useDispatch } from 'react-redux'

const dispatch = useDispatch()
dispatch( increase() )

이런식으로 사용함 

useSelector()

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

import { useSelector } from 'react-redux'
const counter = useSelector(state => state)