Redux

9.26(목)

1. redux

👉 react에서의 store를 이용한 상태관리 라이브러리

📌 npm install @reduxjs/toolkit : createSlice, configurestore
📌 npm install redux : redux 핵심기능
📌 npm install react-redux : react와 redux를 연결

1-1. store

import {configureStore} from "@reduxjs/toolkit";
import CountSlice from "./slices/countSlice.ts";

const projectStore = configureStore({
    reducer: {

        count: CountSlice

    }
})

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof projectStore.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof projectStore.dispatch
export default projectStore;

---

1-2. rtk.ts

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import type { RootState, AppDispatch } from '../store'
// Use throughout your app instead of plain `useDispatch` and `useSelector`

export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

---

1-3. main.tsx

import { createRoot } from 'react-dom/client'
import './index.css'
import {RouterProvider} from "react-router-dom";
import mainRouter from "./router/mainRouter.tsx";
import {Provider} from "react-redux";
import projectStore from "./store.ts";

createRoot(document.getElementById('root')!).render(

    <Provider store={projectStore}>
    <RouterProvider router={mainRouter}></RouterProvider>
    </Provider>
)

---

1-4. countSlice.ts

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


export interface ICount{
    num: number
}

const initialState: ICount = {
    num: 5
}


const countSlice = createSlice({
    name: "count",
    initialState: initialState,
    reducers: {
        increment: (state, action) => {
            console.log(state, action)

            return {num: state.num+1}
        },
        decrement: (state, action) => {
            console.log(state, action)

            return {num: state.num-1}
        }

    }
})

export const {increment, decrement} = countSlice.actions;

export default countSlice.reducer

👉 state: 현재 Redux스토어의 상태를 나타냄
👉 slice : redux스토어의 특정 상태 조각을 관리함. 현재 예시에서는 count의 num을 관리

---

1-5. 호출하고싶은곳

function MainPage() {

    const dispatch = useDispatch();
    const countState = useAppSelector(state => state.count);

    console.log(countState);

    const handleClick = useCallback(() => {
        dispatch(increment(null))
    },[])

    return (
        <BasicLayout>
            <div>{countState.num}</div>

            <button onClick={() => handleClick()}>Button</button>

        </BasicLayout>
    );
}

export default MainPage;

👉 dispatch : 액션을 스토어에 전달하는 함수로, Button을 눌러 increment액션을 디스패치하여 스토어에 상태를 전달한다.

👉 useAppSelector : Redux스토어 내에있는 count상태를 선택한다.

👉 countState.num : countState안에있는 num속성이 변하는것을 볼 수있다.

---

2. member redux

2-1. signinSlice.ts

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


const signinSlice = createSlice({
    name: "signin",
    initialState: {},
    reducers: {
        signin : (state, action) => {
            console.log("signin")
            console.log(state, action)
        },
        signout: (state, action) => {
            console.log("signout")
            console.log(state, action)
        }
    }
})
export const {signin, signout} = signinSlice.actions;

export default signinSlice.reducer

---

2-2. store.ts

import {configureStore} from "@reduxjs/toolkit";
import CountSlice from "./slices/countSlice.ts";
import signinSlice from "./slices/signinSlice.ts";

const projectStore = configureStore({
    reducer: {

        count: CountSlice,
        signin: signinSlice

    }
})

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof projectStore.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof projectStore.dispatch
export default projectStore;

---

3. cookie

📌 npm install react-cookie

3-1. useCheckAuth.ts

import useSignin from "./useSignin.ts";
import {Cookies} from "react-cookie";

const cookies = new Cookies();

const useCheckAuth = () => {

    const {member, doSignout, doSignin} = useSignin()

    const check = () => {

        const stateEmail = member.email

        if(stateEmail){
            return stateEmail
        }

        const cookieValue = cookies.get("member")

        if(!cookieValue){
            return null
        }
    }



    return{check}
}
export default useCheckAuth

👉 쿠키 객체 가져와서 member쿠키가 있는지 확인

3-2. signinSlice.ts

import {createSlice} from "@reduxjs/toolkit";
import {IMember} from "../types/member.ts";
import {Cookies} from "react-cookie";

const cookies = new Cookies();


const initialState:IMember = {
    email: "",
}

const signinSlice = createSlice({
    name: "signin",
    initialState: initialState,
    reducers: {
        signin : (state, action) => {
            console.log("signin")
            console.log(state, action)
            const email = action.payload.username
            const result =  {email:email}

            cookies.set("member", JSON.stringify(result), {path:"/", maxAge: 60*60*24*7}) // stringify: 자바의 객체를 문자열로 변경하기 위해
            
            return {email:email}
        },
        signout: (state, action) => {
            console.log("signout")
            console.log(state, action)
            return {...initialState}
        }
    }
})
export const {signin, signout} = signinSlice.actions;

export default signinSlice.reducer

👉 쿠키객체 생성하고, 로그인쪽에 cookie.set하여 쿠키이름 및 email객체값을 작성하기위해 JSON.stringify 사용

👉 path를 이용하여 원하는 범위설정