🖥 정의

• 리덕스는 리액트에서 가장 많이 사용되는 상태 관리 라이브러리중 하나이다
• 리덕스를 사용하면 자바스크립트로 만들어진 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리가 가능하다
  Redux
• 하나의 상태(객체)를 갖는다

🖥 관련 용어

📍 Action

• 상태 변화가 필요할때, 액션을 일으킨다.
• 객체로 표현하며, type필드는 반드시 필요하다

actionTypes.js

export const LOGIN = "LOGIN";
export const AUTO_LOGIN = "AUTO_LOGIN";
export const LOGOUT = "LOGOUT";

authAction.js

export function autoLogin(dataToSubmit) {
    const data = request("POST", INDIVIDUAL_URL, dataToSubmit);

    return {
        type: types.AUTO_LOGIN,
        payload: data,
    }
}

📍 Reducer

• 현재 state와 action객체를 받아서 새로운 state를 반환시키는 함수
• action을 기준으로 함수가 실행되며, eventListener의 역할을 수행한다.
• reducer가 여러개인 경우,
  rootReducers 를 설정해 하나로 export 해주어야 한다.

authReducer.js

import * as types from '../actions/actionTypes';


const initialState = {
    uniqueId: '',
    passWord: ''
}

export default function userReducer(state = initialState, action) {

    switch (action.type) {
        case types.LOGIN:
            return {
                ...state,
                uniqueId: action.uniqueId
            }
        case types.AUTO_LOGIN:
            return {
                ...state,
                uniqueId: action.payload.userId
            
    return state;
}

rootReducers.js

import { combineReducers } from "redux";
import authReducer from "./auth";
import userReducer from "./user";
const rootReducers = combineReducers({
    auth: authReducer,
    user: userReducer
});

export default rootReducers;

📍 Store

• state 가 들어있다.
• 오로지 하나의 스토어만 존재해야 한다

import { createStore } from "redux";
import rootReducers from "./reducers/rootReducers";

const store = createStore(rootReducers);

export default store;

📍 Dispatch

• store의 내장함수이다.
• action객체를 넘겨서 상태를 update한다.
• eventTrigger의 역할이다.

function mapReduxDispatchToReactProps(dispatch) {
    return {
        onPressLogin: function (uniqueId, passWord) {
            dispatch(login(uniqueId, passWord));
        }
    }
}

📍 SubScribe

• store의 내장 함수
• listenser 함수를 파라미터로 넣어 호출하면 상태가 업데이트

📍 Selector

• 현재의 값을 caching 하거나 저장하여 사용
• state에서 필요한 데이터를 가져오거나 계산하여 가져오는 역할
• reselect를 이용하면 memoization이 적용되어 재계산을 방지한다
• getter의 역할

  function todo = (state, action) => {
    switch (action.type) {
      case 'ADD_TODO':{
        const newTodo = [...state.todos, action.todo];
        return {
          todos: newTodo,
          compledtedTodos: newTodo.filter(todo => todo.isCompleted),
        }
      }
    ...
    }
  }

🖥 Redux 원칙

📍 Single source of truth

• 하나의 애플리케이션 안에는 하나의 스토어만 사용
• 애플리케이션의 디버깅이 쉬워지고 서버와의 직렬화가 될 수 있고 쉽게 클라이언트에서 데이터를 받아들여올 수 있게 된다.

📍 State is read-only

• 상태를 변화시키는 방법은 오직 액션을 일으키는 것
• 상태를 변화시키는 의도를 정확하게 표현할 수 있고, 상태 변경에 대한 추적이 용이해지게 된다.

📍Changes are made with pure functions

• 변화를 일으키는 리듀서 함수는 순수한 함수
• 리듀서 함수는 이전 상태와 액션 객체를 파라미터
  파라미터 외의 값에는 의존하면 안된다.
• 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어서 반환
• 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 한다.

🖥 언제 써야 할까??

• 앱의 여러 위치에서 필요한 많은 양의 상태들이 존재할 때 (전역 상태가 필요하다고 느껴질 때)
• 상태들이 자주 업데이트 될 때
• 상태를 업데이트 하는 로직이 복잡할 때
• 앱이 중간 또는 큰 사이즈의 코드를 갖고 있고 많은 사람들에 의해 코드가 관리될 때
• 상태가 업데이트되는 시점을 관찰할 필요가 있을 때