Redux Tool Kit 사용법

리덕스(툴킷) 은 porps 없이 편리하게 state 공유가 가능하게 한다. 

 

 

리덕스 스토어에 state 보관하는 법

초기세팅때 만들어둔 store.js 파일을 열어서 아래와 같이 코드를 짜면 state를 만들 수 있다. 

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

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

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

1. 새로운 createSilice 에 state를 만들고

2. configureStore에 리듀서를 등록한다. 

 

저장된 state는 어떻게 사용하냐면

 

사용하고 싶은 컴포넌트에서

import { useSelector } from "react-redux"

function Component(){
  let a = useSelector((state) => state.user )
  console.log(a)

  return (생략)
}

 

useSelector 를 사용한다. 

 

 

리덕스 스토어에 저장된 state를 변경하려면 

1. createSlice안에 state를 수정하는 함수를 만들어서 (두번째 파라미터로 action을 넣어 원하는값으로 바꿀 수 있다.)

2. 파라미터에 넣은  변수는 action.payload 에 저장된다 

2. reducers 안에 넣어둔다. 

3. 다른 파일에서도 사용 할 수 있게 export 한다. 

let user = createSlice({
  name : 'user',
  initialState :{name:'kim'},
  reducers : {
    changeName(state,action){
      return state.name = action.payload
    }
  }
})

export let { changeName } = user.actions

 

4. state를 수정하는 함수를 import 하고 

5.useDispatch 라는 라이브러리를 땡겨온 뒤 

6. dispatch(changeName(action)) 이런식으로 감싸서 실행해야한다. 

import { useDispatch, useSelector } from "react-redux"
import { changeName } from "./../store.js"

const Component = ()=>{
const dispatch = useDispatch()

return(
<button onClick={()=>{
  dispatch(changeName(action))
}}>버튼</button> 
)}