[React] Redux Basic

용어

Action

애플리케이션에서 일어나는 이벤트를 설명

const addTodoAction = {
  type: 'todos/todoAdded',
  payload: 'Buy milk'
}

• type : 작업을 설명하는 문자열
• payload : 작업에 대한 추가적인 데이터

Action Creators

생성하고 액션 객체를 반환

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

Reducers

state와 action을 파라미터로 입력 받아 새로운 상태를 반환

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
}

규칙

• state 와 action을 기반으로 새 상태 값을 계산
• 기존의 state 값을 수정하지 않고, 복사 된 값을 변경하여 값을 업데이트
• 동일한 입력 => 동일한 출력

Store

컴포넌트 외부에 있는 상태 저장소로 감속기를 전달하며 생성

import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({ reducer: counterReducer })

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

• getState : 현재 상태 값을 반환하는 메소드

Dispatch

store의 내장함수 중 하나로, 액션을 발생시키는 역할

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

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

Selectors

store의 state 값에서 특정 데이터만 추출하는 함수
구체적인 값을 선택하여 데이터를 갱신할 때 불필요하게 리렌더링하는 것을 방지

// 1
const selectCounterValue = state => state.value
const currentValue = selectCounterValue(store.getState())

// 2
import { useSelector } from "react-redux";
const name = useSelector((state) => state.User.name);

Process

Initial Setup

1. Redux Store가 reducer function을 통해 생성
2. store에서 reducer를 호출하고 반환 값을 초기 상태로 저장
3. UI가 처음 렌더링 될 때 컴포넌트들은 redux store의 현재 상태에 엑세스하고 해당 데이터들을 사용해 렌더링할 항목을 결정

Updates

1. 사용자에 의해서 이벤트 발생
2. 코드에서 redux store로 action을 dispatch
3. store는 이전 state와 현재 action으로 reducer function을 실행하여 반환 값을 새 state에 저장
4. store는 UI에 업데이트 알림
5. store의 데이터가 필요한 각 UI 컴포넌트는 필요한 state가 업데이트 되었는지 확인
6. 데이터가 변경된 각 컴포넌트는 새 데이터로 강제로 다시 렌더링하여 화면에 내용 업데이트

Example

const { createStore } = require('redux');

// init state
const initState = {
    name: 'Ogu',
    subscribers: 5
}


// action creator
const updateSubscriber = (num) => {
    return {
        type: 'UPDATE_SUBSCRIBER',
        payload: {
            num
        }
    }
}

// reducer
const reducer = (prevState, action) => {
    switch (action.type) {
        case 'UPDATE_SUBSCRIBER':
            return {
                ...prevState,
                subscribers: action.payload.num
            }
        default:
            return prevState
    }
}

// store
const store = createStore(reducer, initState)

// dispatch
console.log(store.getState()); // { name: 'Ogu', subscribers: 5 }

store.dispatch(updateSubscriber(8))
console.log(store.getState()); // { name: 'Ogu', subscribers: 8 }

store.dispatch(updateSubscriber(10))
console.log(store.getState()); // { name: 'Ogu', subscribers: 10 }

출처 : Redux Overview and Concepts(https://ko.redux.js.org/tutorials/essentials/part-1-overview-concepts/)