[SEB_FE_44]Redux!

Kim Minki·2023년 4월 24일

SEB_FE_44 redux 코드스테이츠

코드스테이츠

목록 보기

17/29

이번 챕터에서는 상태를 다루기 위해 만들었던 상태 변경 로직을 컴포넌트로 부터 분리하여 단순한 함수 컴포넌트를 만들기 위해서 Redux를 배워보는 시간이다. 😀

먼저 Reducer에 대하여 알아보자!

Reducer

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

Reducer의 사용법

const [state, dispatch] = useReducer(reducer, initialState);

적용

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에서는 Action 객체의 type 값에 따라 분기하는 switch 조건문을 만들어주고 Counter 컴포넌트에서는 useReducecr 를 선언하여 dispatch 를 하여 Action을 받아온다.

Dispatch

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

// Action 객체의 직접 작성
dispatch( { type: 'INCREASE' } );
dispatch( { type: 'SET_NUMBER', payload: 5 } );

Redux Hooks

Redux Hooks는 React-Redux에서 Redux를 사용할 때 활용할 수 있는 Hooks 메서드를 제공한다. 그중에서 크게 useSelector(), useDispatch() 이 두 가지의 메서드를 기억해야 한다.

useDispatch()

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

import { useDispatch } from 'react-redux'

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

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

useSelector()

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

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