Redux 2 : store에 state 보관하고 사용하기

이전 포스팅 🤑
Redux 1 : Redux Toolkit 설치

Redux store에 state 보관

전 포스팅에서 만들어 둔 store.js파일 안에 state를 하나 만들어보자!

step 1. createSlice()로 state 생성
step 2. configureStore()안에 등록

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

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

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

1. createSlice() 상단에 import 후
   { name : 'state이름', initialState : 'state값' }를 넣어 state 생성
   💡 createSlice()는 useState()와 용도가 비슷하다고 보면 됨.

2. state등록은 configureStore()안에
   { 작명 : createSlice만든거.reducer }으로 등록하면 끝!
   여기서 등록한 state는 모든 컴포넌트가 자유롭게 사용이 가능하다.

Redux store에 state 가져와 사용하기

(Cart.js)

import { useSelector } from "react-redux"

function Cart(){
  let a = useSelector((state) => { return state } )
  console.log(a)

  return (생략)
}

state를 사용할 컴포넌트에 useSelecor((state) => {return state})를 쓰면 store안에 있는 모든 state가 자리에 남음.

• result : { user : 'kim' }

let state = useSelector((state) => state.user ) 

▲ 이런식으로 축약도 가능

🤔 그럼 Redux를 마구마구 써도 될까?

✨ 간단한거나 컴포넌트가 몇 개 없을 때는 그냥 props를 쓰는게 더 코드가 짧음.

다음 포스팅 🤩
Redux 3 : store의 state 변경