[Redux] redux-toolkit 사용하기

리덕스 툴킷 설치

npm i @reduxjs-toolkit

슬라이스 만들기 ( slice.js )

import { createSlice } from "@reduxjs/toolkit"

const initState = {
    name: 'jeon',
    count : 0
  }
const slice = createSlice({
    name:'changer', // 슬라이스 이름
    initialState:initState, // state 초기값
    reducers:{ // 리듀서들을 정의한다. (reducer's')
      nameChange:(state,action)=>{ // 액션타입:리듀서
        state.name = action.payload
      },
      countChange:(state,action)=>{
        state.count += action.payload
      }
    }
  })
  export default slice
  export const {nameChange,countChange} =slice.actions;

리덕스툴킷은 상태값의 불변성 관리가 알아서 된다 ( immer.js 내장 )

count값을 관리할때
원래라면 원본을 건드리지않고 복사본을 만들어 리턴을했다.

if(action.type==='countUp'){
	return {
    	...state,
        count : count + action.payload
    }

리덕스 툴킷에서는 이런식으로 기재해도 된다.

state.count += action.payload 

스토어 만들기 ( store.js )

import { configureStore } from "@reduxjs/toolkit"
import slice from './slice'

export const store = configureStore({ // 슬라이스들을 합쳐줌
    reducer:{
      changer:slice.reducer
    }
  })
  

툴킷의 키컨셉 : 단위기능 슬라이스 => configureStore() => 스토어

Provider 설정하기 ( App.js )

import { Provider } from 'react-redux'; 
import { store } from './store'; 

import Hello from './Hello';
function App() {

  return (
    <Provider store={store}> // 값을 공급할 컴포넌트를 감싸면 됨
    <div className="App">
      <Hello/>
    </div>
    </Provider>
  );
}

export default App;

사용처 설정하기 ( Hello.js )

import { useDispatch, useSelector } from 'react-redux'
import { nameChange,countChange } from './slice'


function Hello() {
  const data = useSelector(state=>state.changer) 
  const dispatch = useDispatch()
  
  return (
    <>
    <div>hello , {data.name}</div>
    <div>count : {data.count}</div> 
    <button onClick={()=>{
      dispatch(countChange(2)) // action.payload가 기본컨벤션임
      dispatch(nameChange('park'))
    }}>change!</button>
    </>
  )
}

export default Hello