리액트 Redux store 사용법

Redux는 state들의 상태관리를 더욱 더 간편하게 하기 위해서 사용한다.

그러기 위해서는 store에 사용 할 state들을 보관해놓고 컴포넌트들 사이에서 state 공유를 하면 된다.

🔍 Redux store에 state 보관하기

1. state 들 저장할 js 파일에서 createSlice( ) 로 state 만들기

//Store.js 파일

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

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




export default configureStore({
  reducer: { }
}) 

여기서 createSlice는 useState의 역할을 한다.

만약에 사이트 내에서 유저의 이름을 저장해본다고 가정해보자

//Store.js 파일

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

createSlice({
  name : 'userName', // state 명 
  initialState : 'brgndy' // state 값
})




export default configureStore({
  reducer: { }
}) 

2. configureStore 안에 state 등록하기

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

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




export default configureStore({
  reducer: {
    작명 : user.reducer // 보통 createSlice를 저장한 변수명과 동일하게 함

   }
}) 

createSlice 안에 있는 내용들을 변수 하나에 담아주어서 그것을 reducer를 통해 넘겨준다.

이렇게 되면 모든 컴포넌트들이 user에 바인딩된 state를 사용할 수 있게 된다.

3. state 를 사용할 컴포넌트에 가서 useSelector 로 state 꺼내기

// state를 사용할 Cart.js 파일

function Cart() {

  let A = useSelector((state) => { return state})

  return (
    
  ...

이렇게 되면 저 useSelector 안에는 Store.js 안에 적힌 모든 state들이 남게 되고 저장한 변수를 통해 사용할 수 있게 된다.

console.log(A) 를 해보면 Store 안에 저장된 state가 출력되는 것을 확인해 볼 수 있다.

만약에 여러개의 state를 등록한다면 똑같이 reducer를 이용해서 state를 내보내고 useSelector를 사용해서 꺼내오면 된다.

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

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

let stock = createSlice({
  name : '재고',
  initialState : [10, 11, 12]
})


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

state들이 정상적으로 출력이 된다.

만약에 특정 state 만 사용하고 싶다면 변수.사용할state명 을 사용하면 된다.

// state 사용할 Cart 컴포넌트

function Cart() {

  let A = useSelector((state) => { return state})

  console.log(A.stock);
  ...

---

useSelector 에서 특정 state 만 사용할 수 있도록 하기

저 useSelector Store의 상태값을 반환해주는 역할을 하는 Hook이다.

저 함수 안에서 return 되는 값들을 구분해주어서 특정 state만 사용 할 수 있다.

function Cart() {

  let A = useSelector((state) => { return state.user})

  console.log(A);

function Cart() {

  let A = useSelector((state) => { return state.stock})

  console.log(A);

  return (
  ...

---

❗️ 모든 state들을 다 store 안에 넣어줄 필요는 없다.
공유가 필요하지 않고 그 컴포넌트 내에서만 사용하는 state는 그냥 useState를 사용하는 것이 더 간편하다❗️

---