[07] React - Redux-toolkit

Redux Toolkit

Redux를 더 쉽게 사용하기 위한 도구로 기존의 Redux의 여러 문제점을 보완해줌

사용법

1) Store.js를 생성해 state를 보관하는 파일을 생성

store.js

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
}) 

2) index.js에 들어가 Provider와 store.js를 import해온다. 이와 같이 설정하면 store.js에 있던 state를 props없이 꺼내올 수 있음.

index.js

import {Provider} from 'react-redux';
import store from './store';
  
  
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <BrowserRouter>
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </BrowserRouter>
  </Provider>
);

3) store.jsdp createSlice()로 state를 만들고 configureStore()에 등록.

store.js

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

let user = createSlice({
  name : 'user',
  initialState : {name:'choi', age : 26}
})

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

name은 state, initalState은 state의 초기값이라 생각하기

4) state를 사용할 js파일에가서 useSelector로 state값 가져오기

Profile.js

import { useSelector } from "react-redux"

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

  return (생략)
}

state 수정

1) reducers안에 수정할 데이터를 작성후 함수 생성
store.js

let user = createSlice({
  name : 'user',
  initialState : {name:'choi', age : 26},
  rerucers : {
    countUp(state){
      state.age+=1;
})

2) 1번의 함수 바로 아래 export 해주기

export let { countUp } = user.actions

3) 원할때 import를 사용하되, useDispatch()로 감싸야함

cart.js

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

function Profile(){
  
  let state = useSelector((state)=> state)
  let dispatch = useDispatch()
  
  return (
	<>
      <button onClick={()=>{
        dispatch(countUp())
      }}>버튼</button> 

state 변경함수가 여러개 필요할 때

변경함수에 2번째 파라미터를 action을 작명

store.js

let user = createSlice({
  name : 'user',
  initialState : {name : 'choi', age : 26},
  reducers : {
    increase(state, action){
      state.age += action.payload
    }
  }
}) 

state 변경함수를 action이라 한다.

profile.js

	(생략)
  return (
	<>
      <button onClick={()=>{
        dispatch(countUp(10))
      }}>버튼</button> 
  ...