React 쇼핑몰 사이트 만들기 (3) - Redux 사용하기

store에 

각각 ~.slice.js 파일을 생성해줌 (product는 products , product 두개를 생성) 

main store를 만들기 위해서 store/index.js 파일 생성해줌 

 

 

import {configureStore} from "@reduxjs/toolkit"
import userSlice from "./user/user.slice"
import categoriesSlice from "./categories/categories.slice"
import productsSlice from "./products/products.slice"
import cartSlice from "./cart/cart.slice"
import productSlice from './products/product.slice'
import orderSlice from './order/order.slice'
//Root reducer createStore대신 configurestore를 사용한다. 
export const store = configureStore({
    reducer : {
        orderSlice,
        productSlice,
        cartSlice,
        userSlice,
        categoriesSlice,
        productsSlice
    }
})

 

 

[ userSlice.js ] 

 

createSlice 

- initialState는 localStorage에 저장된 'user' 값을 사용함 

 

CreateSlice 란 ? 

: 리듀서 함수의 객체, 슬라이스 이름, 초기 상태 값을 받아들이고 해당 액션 생성자와 액션 유형으로 슬라이스 리듀서를 자동으로 생성

: createAction, createReducer라는 함수가 내부적으로 사용되며 createSlice에 선언된 Slice이름을 따라서 reducer와 action 생성자, action type을 자동으로 생성함 

: payload필드에 값이 들어가기 때문에, 내부적으로 어떻게 동작하고 있는지 이해할 필요가 있음 

import {createSlice} from "@reduxjs/toolkit"

//localStorage에 'user'가 있으면 가져오고, 아니면 다 빈값으로 가져옴 
//'user'는 email, token, id로 이루어져있음 
const initialState = localStorage.getItem('user')?
JSON.parse(localStorage.getItem('user')) : {email:"", token:"", id:""}
export const userSlice = createSlice({
    name: 'user',
    initialState,
    reducers: {
        setUser: (state, action) => {
            state.email = action.payload.email;
            state.token = action.payload.token;
            state.id = action.payload.id;

            localStorage.setItem('user', JSON.stringify(state));
        },
        //setUser랑 반대로 빈값을 넣어주는 방식 
        removeUser: (state) => {
            state.email = "";
            state.token = "";
            state.id = "";

            localStorage.setItem('user', JSON.stringify(state)); 
        }
    }
})

export const { setUser, removeUser } = userSlice.actions;
export default userSlice.reducer;

 

 

Provider ? 

: React는 props나 state로 관리하지만, props나 state이외에도 상태관리 라이브러리인 react-redux, mobx-react, react-apollo등으로 관리 할 수 있다. 

: provider는 react-redux에서 상태관리하는 방법 중 하나

: provider의 역할은 App이 Redux.store에 접근할 수 있도록 해줌 

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './global.scss'
import {Provider} from 'react-redux'
import {store} from './store'

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>

)

store안에 생성된 여러개의 reducer들을 Provider 컴포넌트로 store를 공급할 컴포넌트를 감싸줌

이때 props로 store를 내려주면 Provider하위 컴포넌트는 모두 store에 자유롭게 접근이 가능함 !