기존 createContext로 전역상태인 userState를 만들고 사용하던 것에 redux를 적용하였습니다.

• redux toolkit의 createSlice 사용 전

폴더 구조

userSlice

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  user: null,
};

export const userSlice = createSlice({
  name: "user",

	// 초기 상태
  initialState,

	// login과 logout action
  reducers: {
    login: (state, action) => {
      return { user: action.payload };
    },
    logout: (state, action) => {
      return { user: null };
    },
  },
});

// action 내보냄
// state를 변경하고자 하는 곳에서 dispatch를 통해 사용됨
export const { login, logout } = userSlice.actions;

// reducer 내보냄
// store.js에서 store에 담김
export default userSlice.reducer;

store.js

import { configureStore } from "@reduxjs/toolkit";
import userReducer from "./userSlice";

// configureStore -> redux dev tools 사용 가능
export const store = configureStore({
	// 여러 reducer 담을 수 있음
  reducer: {
		// state를 사용하고자 하는 곳에서 useSelector를 통해 사용됨
    user: userReducer,
  },
});

state 변경 / 사용

import React from "react";

// useSelector는 state 사용할 때, dispatch는 state 변경할 때
import { useSelector, useDispatch } from "react-redux";

// action 받아옴
import { login, logout } from "../../redux/userSlice";

function MainPage() {
  const dispatch = useDispatch();

	// (state => state.user)에서 user는 store.js에서 정의한 user: userReducer의 key
  const userState = useSelector(state => state.user);

  const handleLogin = () => {
		// "hi"는 action.payload에 담김
    dispatch(login("hi"));
  };

  const handleLogout = () => {
    dispatch(logout());
  };

  return (
    <>
      <div>{userState.user}</div>
      <button onClick={handleLogin}>login</button>
      <button onClick={handleLogout}>logout</button>
    </>
  );
}

export default MainPage;

확장프로그램 설치 안내

크롬의 ReduxDevTools 확장 프로그램을 설치하면 action과 state의 현재 상태를 관찰할 수 있습니다.