React) Redux 02_state만들고 쓰기

state만들기

state생성

store.js 내에서

createSlice({ 
  name : state이름,
  initialState : 값
})

이렇게 만들어진 하나의 state를 slice라고 한다.
createSlice로 생성해줬다면, 이 생성된 전체를 state로서 등록을 해줘야한다.
이를 위해 createSlice구문을 변수로 지정해 할당한다.

let state이름 = createSlice({ 
  name : state이름,
  initialState : 값
})

state등록

store.js 내에서

export default configureStore({  //state등록
  reducer: {
    state이름 : state이름.reducer
  }
}) 

예시코드

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

let user = createSlice({  //state생성 후 'user'변수에 할당
  name : 'user',
  initialState : 'kim'
})

export default configureStore({  //state등록
  reducer: {
    user : user.reducer
  }
}) 

---

state 가져와 사용하기

사용하려는 component의 js 내에서

import { useSelector } from "react-redux"

function 컴포넌트(){
  let state = useSelector((state) => { return state } )
  console.log(state) //store의 모든 state다 들어옴

  return (생략)
}

이때 state라는 변수에는 store.js에서 만들어진 모든 state가 전부 담긴다.
만약 전부 담고싶은게 아니라 그 중 특정 state만 담아 저장하고싶다면,
let user = useSelector((state) => { return state.user } )
store.user로 지정해두면 store의 모든 state중에서 user만 가져온다. store은 객체이기에!