Redux 튜토리얼 Part.1

Hunter Joe·2024년 8월 29일
redux

Redux

목록 보기
1/1

Redux와 RTK 무엇을 더 먼저 공부해야하는지 의문점이 생겼는데 공식문서에서는 Redux먼저 하라고 권장.

Redux 한글 docs

Link here

What to learn?

  • Redux란? 그리고 왜 사용해야하는가

  • Redux의 주요 용어 및 개념

  • Redux 앱에서 데이터가 흐르는 방식

    필수조건

  • HTML, CSS

  • ES2015 구문 및 특징

  • React 용어에 대한 지식: JSX , 함수형 컴포넌트 , Props , State , Hooks

  • 비동기 JavaScript 에 대한 지식 과 HTTP 요청 수행

  • TypeScript 구문 및 사용법 에 대한 기본 이해

    <나는 Ts에대해서는 잘 모르지만 일단 도전>

    Redux란?

    Redux는 전역 애플리케이션 상태(state)를 관리하고 업데이트하기 위한 패턴과 라이브러리로, UI가 "actions"이라는 이벤트를 발생시켰을 때 무슨 일이 일어났는지 설명하고, 별도의 업데이트 로직인 "reducers"가 이에 반응하여 상태를 업데이트 한다.

    왜 써야함?

  • global State 를 관리하는데 도움이 됨

  • 애플리케이션의 상태가 언제, 어디서, 왜, 어떻게 업데이트 되었는지, 해당 변경이 발상했을 때 애플리에키션 로직이 어떻게 동작하는지 더 쉽게 이해 가능
    -> Redux는 예측 가능하고, 테스트 가능한 코드를 작성하도록 안내해 개발자의 의도대로 흘러갈 수 있도록 도움

언제 사용해야 함?

  • 앱의 여러 곳에 필요한 대량의 애플리케이션 상태가 존재할 때
  • 로직이 복잡할 때
  • 대규모 코드베이스를 가지고 있고, 여러 사람이 작업할 때

Redux 용어 및 컨셉

action

action은 type필드를 가진 일반 Js 객체이다. action은 애플리케이션에서 발생 한 일을 설명하는 이벤트로 생각할 수 있다.

type필드는 이 action에 설명적 이름을 부여하는 문자열이어야 한다
-> Ex) "todos/todoAdded" ("domain/eventName")형태로 작성할 것

  • 첫 번째 부분은 이 action이 속한 기능이나 범주,
  • 두 번째 부분은 발생한 특정 사건

action 객체는 발생한 일에 대한 추가 정보를 담은 다른 필드를 가질 수 있는데, 관례적으로 그 정보를 payload라는 필드에 넣는다.

// 일반적인 action 객체 
const addTodoAction = {
  type : 'todos/todoAdded',
  payload : 'buy milk'
}

Action creators

action creator는 action 객체를 생성하고 반환하는 함수
일반적으로 이것을 사용하므로 매번 action 객체를 직접 작성할 필요 X 

const addTodo = text => {
  return {
    type : "todos/todoAdded",
    payload : text
  }	
}

reducer

reducer는 현재 state와 action 객체를 받아서, 상태를 어떻게 업데이트할지 결정한 후 새로운 상태를 반환하는 함수.
(state,action) => newState reducer는 받은 action(이벤트)의 타입에 따라 이벤트를 처리하는 event listener로 생각할 수 있다.

const initialState = { value: 0 }

function counterReducer(state = initialState, action) {
  // Check to see if the reducer cares about this action
  if (action.type === 'counter/increment') {
    // If so, make a copy of `state`
    return {
      ...state,
      // and update the copy with the new value
      value: state.value + 1
    }
  }
  // otherwise return the existing state unchanged
  return state
}

reducer rules

  • state와 action인수만을 기반으로 새로운 상태 값을 계산할 것
  • 기존 state를 직접 수정해서는 안되며, 대신 기존 상태를 복사하고 그 복사본에 변경 사항을 적용하여 불변성을 유지할 것
  • reducer는 "순수 함수"여야 한다. : 비동기 로직을 실행하거나, 랜덤 값을 계산하거나, 다른 "부수 효과"를 일으켜서는 안된다.

Store

현재 Redux 애플리케이션 state는 store라는 객체에 저장된다.
store는 reducer를 전달하여 생성되며, 현재 상태 값을 반환하는 getState라는 메서드를 가지고 있다. 

import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({ reducer: counterReducer })

console.log(store.getState())
// {value: 0}

Dispatch

Redux store에는 dispatch라는 메서드 존재
상태를 업데이트하는 유일한방법은 store.dispatch()를 호출하고 action 객체를 전달하는 것. store는 reducer함수를 실행하고 새로운 상태 값을 내부에 저장하며, getState()를 호출하여 업데이트 된 값을 가져올 수 있다. 

store.dispatch({ type: 'counter/increment' })

console.log(store.getState())
// {value: 1}

action을 dispatch하는 것을 애플리케이션에서 "triggering an event"라고 생각할 수 있다.
무언가 발생했고, 우리는 store가 그 사실을 알도록 하고 싶을것이다. reducer는 event listener처럼 동작하며, 관심 있는 액션을 감지하면 그에 따라 상태를 업데이트 한다. 

const increment = () => {
  return {
    type: 'counter/increment'
  }
}

store.dispatch(increment())

console.log(store.getState())
// {value: 2}

Selectors

Selectors는 store의 state값에서 특정 정보를 추출하는 방법을 알고 있는 함수.
애플리케이션의 여러 부분에서 동일한 데이터를 읽어야 할 때 반복되는 로직을 피하는 데 도움을 준다. 

const selectCounterValue = state => state.value

const currentValue = selectCounterValue(store.getState())
console.log(currentValue)
// 2

Redux data flow diagram

profile
Hunter Joe
Improvise, Adapt, Overcome

0개의 댓글