[Redux Toolkit] Provider, configureStore, createSlice

redux를 통해 mock data를 관리하여 회원가입 및 로그인 기능을 구현하고자 한다.

1. 최상단 컴포넌트를 Provider 컴포넌트로 감싸주기

import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import router from './Router';
import { Provider } from 'react-redux';
import { store } from './store/store';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <RouterProvider router={router} />
    </Provider>
  </React.StrictMode>
);

2. configureStore - 단일 스토어 생성

// store.ts

import { configureStore } from '@reduxjs/toolkit';
import usersReducer from './usersSlice';
import authReducer from './authSlice';

export const store = configureStore({
  reducer: { users: usersReducer, auth: authReducer },
});

3. createSlice - usersSlice & authSIice

// usersSlice.ts

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

interface User {
  id: string;
  pw: string;
}

interface UsersState {
  users: User[];
}

const initialState: UsersState = {
  users: [
    {
      id: 'admin',
      pw: '1234',
    },
    { id: 'tester', pw: 'tester' },
  ],
};

const usersSlice = createSlice({
  name: 'users',
  initialState: initialState,
  reducers: {
    addUser: (state, action: PayloadAction<User>) => {
      state.users.push(action.payload);
    },

    removeUser: (state, action: PayloadAction<string>) => {
      state.users = state.users.filter((user) => {
        return user.id !== action.payload;
      });
    },
  },
});

export const { addUser, removeUser } = usersSlice.actions;

export default usersSlice.reducer;

&

// authSlice.ts

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

const initialState = {
  isLogin: false,
};

const authSlice = createSlice({
  name: 'auth',
  initialState: initialState,
  reducers: {
    login: (state) => {
      localStorage.setItem('isLogin', 'yes');
      state.isLogin = true;
    },
    logout: (state) => {
      localStorage.removeItem('isLogin');
      state.isLogin = false;
    },
  },
});

export const { login, logout } = authSlice.actions;

export default authSlice.reducer;