Redux(1)의 내용에서는 기본 세팅하는 법에 대해서 다루어 보았습니다

이번에는 기본적으로 store에 state를 보관하고 사용하는 법에 대해서 다루어 보겠습니다

store.js에서 state 생성

먼저 store.js에 여기저기서 사용할 변수를 생성해줍니다.

import { createSlice, configureStore } from '@reduxjs/toolkit'

let user = createSlice( { 
	name : 'user',
    initialState : 'kim'
})

export default configureStore({
  reducer: {
    user : user.reducer
  }
}) 

항상 redux 사용하면서 변수를 생성할 때는 createSlice()로 생성해야 합니다.
중괄호 안에 name: 'user' 은 state의 이름입니다. 즉, state의 이름은 'user'
중괄호 안에 initialState: 'kim' 은 state의 정보입니다. 즉, useState('kim')이다

export default 안에서 reducer: { user: user.reducer }
이라고 꼭 작성해 줘야 다른 js 파일에서 인식할 수 있다.

💊 간단 정리 💊

createSlice() 상단에 import 해온 다음
{ name: 'state 이름', initialState: 'state 값' }
state 생성 완료
createSlice( ) 는 useState( ) 와 용도가 비슷하다고 보면 됩니다

state 등록은 configureStore( ) 안에 하면 됩니다.
{ 작명 : createSlice만든 거 . reducer }
등록 끝

Cart.js 에서 사용

import { useSelector } from "react-redux"
let cart = ()=>{
  let state = useSelector((state)=>{return state})
  // reutnr state를 사용하면 store에서 만들었던 모든 state들이 저장됩니다.
  console.log(state.user)
  //또는
  let user = useSelector((state)=>state.user)
  console.log(user)
return(
)
}

📜 느낀 점
state 또는 페이지가 정말 많은 프로젝트를 할 때 사용하면 유용할 거 같지만 그냥 간단한 거 만들 때는 props 또는 {state}를 넣어서 사용하는 게 더 편리할 것 같다.
그리고 useSelector((state)=>{return state})는 기본 문법이라서 그냥 외워서 사용해야 한다
let user = useSelector((state)=>state.user)는 state가 많을 때 user만 사용하고 싶다면 이렇게 사용하면 된다.

다음 포스트는 store의 state를 변경하는 법에 대해서 다루어 볼 생각