Redux

제가 생각하는
Redux 란? 전역상태관리 라이브러리입니다.
Redux 를 사용하는 이유는 컴포넌트 깊이가 깊어져 props drilling이 우려 될 경우에 사용한다고 생각됩니다.

공식문서에서의 Redux를 유용하게 사용 될 때

• 앱의 여러 위치에서 필요한 많은 양의 애플리케이션 상태가 있습니다.
• 앱 상태가 자주 업데이트됩니다.
• 해당 상태를 업데이트하는 논리는 복잡할 수 있습니다.
• 앱에 중간 또는 큰 규모의 코드베이스가 있으며 많은 사람들이 작업할 수 있습니다.
• 시간이 지남에 따라 해당 상태가 어떻게 업데이트되는지 확인해야 합니다.

Redux 구조

state(저장소)안에 객체 구조로 저장되며,
상태를 변경하는 방법은 액션을 보내고
어떻게 변경 할지 리듀서를 이용해야 합니다.

• configStore.js

import { createStore } from "redux";
import { combineReducers } from "redux";

const rootReducer = combineReducers({});
// 에러 및 잘못된 상태변경에도 최소한의 원래값의 객체를 반환하도록 하는
// Redux 내장 유틸리티
const store = createStore(rootReducer); 

export default store; 

• index.js

import ReactDOM from "react-dom/client";
import App from "./App";
import store from "./redux/config/configStore";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}> 
    <App />
  </Provider>
);

• someState.js

// action value
const ADD_TODO = "App/todoList/ADD";
const DELETE_TODO = "App/todoList/DELETE";
const DONE_TODO = "App/todoList/DONE";

// action creator
export const addTodo = payload => {
  return { type: ADD_TODO, payload };
};
export const deleteTodo = payload => {
  return { type: DELETE_TODO, payload };
};
export const doneTodo = payload => {
  return { type: DONE_TODO, payload };
};

// initial value
const initialState = { todoList: [] };


//redux
const todoList = (state = initialState, action) => {
  const actionAdd = { todoList: [...state.todoList, action.payload] };

  const actionDelete = { todoList: state.todoList.filter(item => item.id !== action.payload) };

  const actionDone = {
    todoList: state.todoList.map(item => {
      return item.id === action.payload ? { ...item, isDone: !item.isDone } : item;
    })
  };

  switch (action.type) {
    case ADD_TODO:
      return { ...state, ...actionAdd };
    // ...state 현재는 값이 한 개지만 여러개가 있을 경우 불변성을 유지해줌
    case DELETE_TODO:
      return { ...state, ...actionDelete };
    case DONE_TODO:
      return { ...state, ...actionDone };
    default:
      return state;
  }
};

export default todoList;