React : state 공유하는 "Redux" (state 보관/사용)

store에 state 보관하는 법

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

let 작명 = createSlice({
  name : 'state 이름',
  initialState : 'state 값'
})
let user = createSlice({
  name : 'user',
  initialState : 'kim'
})
let stock = createSlice({
  name : 'stock',
  initialState : [10,11,12]
})

export default configureStore({
  reducer: {
    작명 : createSlice만든거.reducer,
    user : user.reducer,
    stock : stock.reducer
  }
})

• createSlice({})로 state를 만든다.
  createSlice()sms useState()와 용도가 비슷하다고 보면 될듯.
• configureStore({})안에 state를 등록한다.

---

컴포넌트에서 state 갖다쓰는 법

import { useSelector } from 'react-redux';

function Cart(){
  useSelector((state)=>{ return state })
  ...

1. useSelector를 import한다.
2. useSelector((state)=>{ return state })를 컴포넌트 안에 넣는다.

---

state 사용 예시

function Cart(){
  let state = useSelector((state)=> state ) //return 및 괄호 생략했음
  console.log(state.stock)
  ...

state 특정하기

useSelector 안의 state는 store.js 안의 모든 state를 가리키고 있기 때문에, 특정해서 사용할 수 있다.

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

---

출처 : 코딩애플 https://codingapple.com/