針對前端頁面所用到的各種狀態根據不同feature，切成不同Slice管理狀態，ex: userSlice.js themeModeSlice.js，加入到store之後被頁面使用

File Structure:

userSlice.js

import { createSlice } from '@reduxjs/toolkit'

export const userSlice = createSlice({
  name: 'User',
  initialState: {
    user: null,
    listFavorites: [],
  },
  reducers: {
    setUser: (state, action) => {
      if (action.payload === null) {
        localStorage.removeItem('actkn')
      } else {
        if (action.payload.token) {
          localStorage.setItem('actkn', action.payload.token)
        }
      }
      state.user = action.payload
    },
    setListFavorites: (state, action) => {
      state.listFavorites = action.payload
    },
    removeFavorite: (state, action) => {
      const { mediaId } = action.payload
      state.listFavorites = [...state.listFavorites].filter(item => item.media.toString() !== mediaId.toString())
    },
    addFavorite: (state, action) => {
      state.listFavorites = [action.payload, ...state.listFavorites]
    },
  },
})
export const { setUser, setListFavorites, addFavorite, removeFavorite } = userSlice.actions

export default userSlice.reducer

store.js

import { configureStore } from '@reduxjs/toolkit'
import userSlice from './features/userSlice'
import themeModeSlice from './features/themeModeSlice'

const store = configureStore({
  reducer: {
    user: userSlice,
    themeMode: themeModeSlice,
  },
})

export default store