React, store에 state 보관하고 사용

Redux store에 state 보관하는 법 

//store.js

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

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

let item = createSlice({
  name : 'item',
  initialState : ['A', 'B', 'C']
})


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

1. createSlice( ) 로 state 만들기

createSlice( )를 상단에서 import 해온 다음에

{ name : 'state이름', initialState : 'state값' }으로 state 하나 생성

 

2. configureStore( ) 안에 등록

configureStore( )를 상단에서 import 해온 다음에

{ 작명 : createSlice만든state.reducer }로 configureStore안에 등록

 

 

Redux store에 있던 state 사용

import { useSelector } from "react-redux"

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

컴포넌트에서 useSelector((state) => { return state } ) 쓰면 store에 있던 모든 state가 그 자리에 남음

 

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

원하는 state만 가져다 사용가능

-  js문법으로 return과 중괄호는 생략 가능

 

→ Redux를 이용하면 편하지만 간단한거 만들때나 컴포넌트가 몇개 없을 경우에는 props를 쓰는것이 더 코드가 짧을 수 있으니 생각하여 편한쪽으로 사용하면 됨