TIL Day 41 : Redux

Redux를 이용한 상태관리

Action 객체는 Dispatch 에게 전달되고, Dispatch를 호출해서 새로운 state를 생성

Redux 기본 개념
1. UI에서 상태가 변하는 컴포넌트를 클릭한다.
2. Dispatch 전달인자로 Action객체를 전달하고 Reducer에 전달한다.

{type : 'increment',
 payload : 10}

3. Reducer 에서는 Action의 type에 따라 다른 동작을 수행하는데 이를 통해 새로운 상태가 반환된다.

Redux의 장점
1. 상태를 예측 가능하게 만들어 준다.
2. 유지보수
3. 디버깅에 유리하다
4. 테스트를 붙이기 쉽다.

개념으로만 공부하니 잘 와닿지 않아서 스프린트를 진행하면 개념을 이해해 보겠다.

Action - Reducer - Dispatch - Store 가 어떻게 유기적으로 연결되어 있는지 배우자.

이 4가지 개념들을 코드로 구성했다면, 이들을 연결시켜야 한다. 연결시키는 방법은 크게
1. connet parameter를 통해 mapStateToProps, mapDispatchToProps 등의 메소드를 이용하는 방법
2. Redux hooks를 이용하는 방법
이 있는데 2번이 사용하기 쉽기 때문에 이를 통해서 스프린트를 진행했다.

useSelector : 컴포넌트에서 store의 상태에 접근할 수 있게 하는 메소드다.

import React from 'react'
import {useSelector} from 'react-redux'

export const CounterComponent = () => {
  const counter = useSelector((state) => state.counter)
  return <div>{counter}</div>
}
  //props로 접근하는 방법
import React from 'react'
import { useSelector } from 'react-redux'

export const TodoListItem = (props) => {
  const todo = useSelector((state) => state.todos[props.id])
  return <div>{todo.text}</div>
}

useDispatch : 이벤트가 발생할 때 생성되는 Action 객체를 Reducer로 전달하는 역할을 한다.

import React from 'react'
import { useDispatch } from 'react-redux'

export const CounterComponent = ({ value }) => {
  const dispatch = useDispatch()

  return (
    <div>
      <span>{value}</span>
      <button onClick={() => dispatch({ type: 'increment-counter' })}>
        Increment counter
      </button>
    </div>
  )
}

Redux의 전체적인 상태관리 흐름

스프린트에서 이들의 관계를 파악해보자.