"전역 상태 관리 뭐 쓰세요?"에 떳떳해지기 위해

import { createStore } from "redux";

type Todo = {
  id: number;
  text: string;
};

type InitialState = {
  todos: Todo[];
};

const initialState: InitialState = {
  todos: []
};

const ADD = "ADD" as const;
const DELETE = "DELETE" as const;

// ACTION
const addTodo = (text: string) => {
  return {
    type: ADD,
    text
  };
};
const deleteTodo = (id: number) => {
  return {
    type: DELETE,
    id
  };
};
type ActionType = ReturnType<typeof addTodo> | ReturnType<typeof deleteTodo>;

// REDUCER
const reducer = (state = initialState, action: ActionType) => {
  switch (action.type) {
    case ADD:
      return {
        ...state,
        todos: [{ text: action.text, id: Date.now() }, ...state.todos]
      };
    case DELETE:
      return {
        ...state,
        todos: state.todos.filter((toDo) => toDo.id !== action.id)
      };
    default:
      return state;
  }
};
export type RootState = ReturnType<typeof reducer>;

// STORE
const store = createStore(reducer);

export const actionCreators = {
  addTodo,
  deleteTodo
};

export default store;

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";

/*
 * ... ACTION 까지 동일
 */

type DispatchType = (action: ActionType) => void;

// Middleware
const addTodoAsync = (text: string) => {
  return (dispatch: DispatchType) => {
    fetch("/todo", {
      method: "POST",
      body: JSON.stringify({ text })
    })
      .then((res) => res.json())
      .then(() => {
        dispatch({
          type: ADD,
          text
        });
      })
      .catch((error) => {
        // error handling
      });
  };
};

const deleteTodoAsync = (id: number) => {
  return (dispatch: DispatchType) => {
    fetch(`/todo/${id}`, {
      method: "DELETE"
    })
      .then((res) => res.json())
      .then(() => {
        dispatch({
          type: DELETE,
          id
        });
      })
      .catch((error) => {
        // error handling
      });
  };
};

/*
 * ... REDUCER 동일
 */


// STORE
const store = createStore(reducer, applyMiddleware(thunk));

export const actionCreators = {
  addTodoAsync,
  deleteTodoAsync
};

export default store;

export type RootState = ReturnType<typeof reducer>;

import {
  configureStore,
  createSlice,
  createAsyncThunk
} from "@reduxjs/toolkit";

type Todo = {
  id: number;
  text: string;
};

type InitialState = {
  todos: Todo[];
};

const initialState: InitialState = {
  todos: []
};

const todosSlice = createSlice({
  name: "todos",
  initialState: initialState,
  reducers: {
    addTodo: (state, action) => {
			// 불변성을 유지시켜준다.
      state.todos.push({ text: action.payload, id: Date.now() });
    },
    deleteTodo: (state, action) => {
			// 마찬가지로 이렇게 사용해도 문제없음
      state.todos = state.todos.filter((todo) => todo.id !== action.payload);
    }
  }
});

export const { addTodo, deleteTodo } = todosSlice.actions;

// 비동기 작업을 위한 Thunk
export const addTodoAsync = createAsyncThunk(
  "todos/addTodoAsync",
  async (text: string, thunkAPI) => {
    const response = await fetch("/todos", {
      method: "POST"
      body: JSON.stringify({ text })
    });
    try {
      const data = await response.json();
			// pure action			
      thunkAPI.dispatch(addTodo(text));

    } catch (err) {
			// error handling
    }
  }
);

// Store
const store = configureStore({
  reducer: todosSlice.reducer
});

export const { dispatch } = store;

export default store;

import { atom } from 'recoil';

const todoListState = atom({
  key: 'todoListState',
  default: [],
});

import { useRecoilState } from 'recoil';

function TodoList() {
  const [todoList, setTodoList] = useRecoilState(todoListState);
  
  const addTodo = (text: string) => {
    setTodoList((prev) => [
      ...prev, 
      { id: Date.now(), text }
    ]);
  };
  const deleteTodo = (id: number) => {
    setTodoList((prev) => prev.filter((todo) => todo.id !== id));
  };
  return (
    // ...
  );
}

import { selector } from 'recoil';

const filteredTodoListState = selector({
  key: 'filteredTodoListState',
  get: ({ get }) => {
    const todos = get(todoListState);
    const filter = get(todoFilterState);
    
    switch (filter) {
      case 'completed':
        return todos.filter((todo) => todo.completed);
      case 'uncompleted':
        return todos.filter((todo) => !todo.completed);
      default:
        return todos;
    }
  },
});

// Redux — Store 전체를 구독하면 안 됨
const state = useSelector((state) => state); // 🚫
const todos = useSelector((state) => state.todos); // ✅

// Recoil — todoListState가 변할 때만 이 컴포넌트가 리렌더
const todos = useRecoilValue(todoListState);
// todoFilterState가 변해도 이 컴포넌트는 리렌더되지 않음

const todoListState = atom({
  // 이게 겹치면 콘솔에 거슬리게 경고가 뜨고, 의도치 않은 상태 공유가 일어날 수 있다.
  key: 'todoListState', 
  default: [],
});