📍 기본 셋팅

라이브러리 설치

npm install @reduxjs/toolkit react-redux

( createStore 밑줄 그어진 경우
npm remove redux react-redux
npm install redux@4.1.2 react-redux )

파일 구조

src
-store.js
-reducer
--리듀서 파일1
--리듀서 파일2
-actions
--액션 파일1
--액션 파일2

📁 strore.js

state들을 관리하는 파일

❗개발환경 redux-toolkit server에서 잘 작동화는지 확인할려면
내용 추가

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { 
   ...리듀서들 여기에 추가!
  }
})

📁 index.js 수정

provider로 App을 감싼뒤 store을 받아오면 끝 셋팅 완료
( APP과 그 자식 컴포넌트들은 자유자재로 state들을 꺼내올 수 있다.)

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

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
      <App />
  </Provider>
);

📍 본격적인 State 생성

📁 strore.js

1. createSlice import 하기
2. createSlice () 의 ()속에
   {name: 'state명'}, {initialState : 'state값' } 을 넣어준다.
3. configureStore( ) 안에 등록

import { configureStore } from '@reduxjs/toolkit'
import { 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,
 }
})

📍 store에서 저장한 state 사용

useSelector을 이용하여 가져온다.

✨모든 state들 가져오기

useSelector((state) => { return state } )

✨특정 state들 가져오기

useSelector((state) => { state.name } )

import { useSelector } from "react-redux"

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

📍 state가 object / array인 경우 변경

array, object 자료의 경우 state변경은 state를 직접 수정

( Redux 설치시 Immer.js가 같이 설치 되는데 Immer.js 라이브러리가 state 사본을 하나더 생성하기 때문에 수정이 편리함)

let user = createSlice({
  name : 'user',
  initialState : {name : 'Lee', age : 20},
  reducers : {
    changeName(state){
      state.name = 'park'
    }
  }
})

📍 state 변경 함수가 여러개일 경우

action.type은 state 변경함수 이름이 나옴
action.payload는 파라미터가 나옴
(즉 내가 사용하기 원하는 값이 나오는 것)

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