Slice

Redux Slice는 Redux 상태와 관련 로직을 간단하고 효율적으로 관리하기 위한 구조다. Redux Toolkit을 사용할 때 핵심적으로 등장하는 개념으로 상태(state), 액션(action), 리듀서(reducer)를 한 곳에서 정의할 수 있게 도와준다.

 

Redux Slice란?

Slice는 전체 Redux 상태의 조각이다. 애플리케이션 상태를 여러 개의 Slice로 나눠서 관리할 수 있다.

 

구성 요소

1. State (상태) : Slice는 해당 조각의 초기 상태를 정의한다. 
예: isLoggedIn, userName 같은 상태.

2. Reducers (상태 변경 함수) : 상태를 어떻게 업데이트할지 정의하는 함수들. 리듀서는 Action을 처리하고, 새로운 상태를 반환한다.

3. Actions (상태 변경 요청) : Slice는 Actions을 자동으로 생성한다. dispatch를 통해 상태 변경 요청을 보낼 때 사용.

 

useDispatch

Redux의 액션(action)을 보낼(dispatch) 수 있는 함수를 가져온다. Redux 상태를 업데이트하거나, 비동기 작업을 실행하는 데 사용된다.

import { useDispatch } from 'react-redux';
import { login, logout } from './store/slices/userSlice'; // Slice에서 액션 가져오기

function UserActions() {
  const dispatch = useDispatch(); // dispatch 함수 가져오기

  const handleLogin = () => {
    dispatch(login('Kim Mi Seon')); // login 액션을 디스패치
  };

  const handleLogout = () => {
    dispatch(logout()); // logout 액션을 디스패치
  };

  return (
    <div>
      <button onClick={handleLogin}>Log In</button>
      <button onClick={handleLogout}>Log Out</button>
    </div>
  );
}

createAsyncThunk를 사용하면 비동기 액션 처리가 가능하다.

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

// 비동기 Thunk
export const fetchUser = createAsyncThunk(
  'user/fetchUser',
  async (userId) => {
    const response = await fetch(`/api/users/${userId}`);
    const data = await response.json();
    return data;
  }
);

const userSlice = createSlice({
  name: 'user',
  initialState: { isLoading: false, data: null, error: null },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.isLoading = false;
        state.data = action.payload;
      })
      .addCase(fetchUser.rejected, (state, action) => {
        state.isLoading = false;
        state.error = action.error.message;
      });
  },
});

export default userSlice.reducer;

import { useDispatch, useSelector } from 'react-redux';
import { fetchUser } from './store/slices/userSlice';

function UserInfo({ userId }) {
  const dispatch = useDispatch();
  const { isLoading, data, error } = useSelector((state) => state.user);

  const handleFetchUser = () => {
    dispatch(fetchUser(userId)); // Thunk 실행
  };

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <button onClick={handleFetchUser}>Fetch User</button>
      {data && <div>User Name: {data.name}</div>}
    </div>
  );
}