2.1 Redux 개념

2.1.1 Redux

1) Redux

2) Redux를 사용하는 이유

3) Redux는 언제 사용될까?

(1) 프로젝트의 규모가 클 경우

(2) 상태 관리가 복잡한 경우

(3) 중앙화된 상태 관리가 필요한 경우

(4) 개발자 도구를 통한 디버깅이 필요한 경우

(5) 프론트엔드 라이브러리/프레임워크와 통합해 사용하는 경우

2.1.2 리덕스의 주요 구성요소

1) Store

import { createStore } from 'redux'

const store = redux.createStore(reducer);

2) State

// 현재 스토어의 상태를 가져옵니다.
store.getState()

import React from 'react';

// react-redux로부터 useSelector를 import 해 사용합니다.
import { useSelector } from 'react-redux';

function UserProfile() {

  // useSelector를 사용해 Redux 스토어에서 필요한 상태를 선택합니다.
  const userName = useSelector((state) => state.user.name);
  return (
    <div>
      <h2>User Profile</h2>
      <p>User Name: {userName}</p>
    </div>
  );
}

export default UserProfile;

3) Action

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "공부하기"
  }
}
{
  type: "CHANGE_GREETING",
  text: "안녕하세요. 만나서 반갑습니다."
}

export function addTodo(data) {
  return {
    type: "ADD_TODO",
    data
  };
}

// 화살표 함수로 생성도 가능합니다.
export const changeGreeting = text => ({
  type: "CHANGE_GREETING",
  text
});

4) dispatch()

store.dispatch({ type: "ADD_TODO", data:{id: 0,text: "공부하기" })

// 액션 생성 함수를 넣어서 실행도 가능합니다.
store.dispatch(changeInput);

import React, { useState } from 'react'

// react-redux로부터 useDispatch를 import 해 사용합니다.
import { useDispatch } from 'react-redux'
const Header = () => {
  const [text, setText] = useState('');

  // useDispatch 훅을 사용하여 dispatch 함수를 가져옵니다.
  const dispatch = useDispatch();

  const handleChange = e => setText(e.target.value);

  const handleKeyDown = e => {
    const trimmedText = e.target.value.trim()
    if (e.key === 'Enter' && trimmedText) {
      // dispatch로 "todo added" 액션을 발생시킵니다.
      dispatch({ type: 'todos/todoAdded', payload: trimmedText })
      setText('')
    }
  }
  return (
    <input type="text" placeholder="What needs to be done?"
      autoFocus={true} value={text} onChange={handleChange}
      onKeyDown={handleKeyDown} />
  )
}

export default Header;

5) reducer()

// 리듀서 예시

export default function todoReducer(state = initialState, action) {
  
  // 액션의 타입에 따라 실행하는 명령이 달라집니다.
  switch (action.type) {
    case 'todos/todoAdded': {
      return {
	  // 원본을 복사해 사용합니다.
        ...state,
        todos: [
          ...state.todos,
          { id: nextTodoId(state.todos),
            text: action.payload,
            completed: false }]
      }
    }
    case 'todos/todoToggled': {
      return {
        ...state,
        todos: state.todos.map(todo => {
          if (todo.id !== action.payload) {
            return todo;
          }
          return {
            ...todo,
            completed: !todo.completed
          };
        })
      };
    }
    default:
      return state;
  }
}

import { combineReducers } from "redux";
import todoReducer from "./todoReducer";
import themeReducer from "./themeReducer";

const rootReducer = combineReducers({
    appReducer,
    themeReducer
  }
);

export default rootReducer;

6) subscribe()

function select(state) {
  return state.some.deep.property;
}

let currentValue
function handleChange() {
  let previousValue = currentValue;

  // 현재의 상태 가져오기
  currentValue = select(store.getState());

  if (previousValue !== currentValue) {
    console.log('Some deep nested property changed from',
		previousValue,'to',currentValue);
  }
}

const unsubscribe = store.subscribe(handleChange);
unsubscribe();

2.1.3 Redux의 3원칙

1) Single source of truth

2) State is read-only

3) Changes are made with pure functions

2.1.4 Redux의 작동 흐름