상태 관리 라이브러리
redux < 복잡함, 개념잡기
redux toolkit < 확장팩( 코드의 간소화

redux-toolkit

설치 명렁어

npm install @reduxjs/toolkit react-redux

redux (redux-toolkit)에서 사용하는 용어

1. store : 모든 state 변수를 저장하고 관리하는 저장소 / 하나의 프로젝트에는 하나의 store만 사용 가능
2. Action : store에 저장된 state 변수의 값을 변경할 데이터
3. Reducer : action을 받아서 state값을 변경하기위해 실행되는 함수
4. Dispatch : Reducer를 실행시켜주는 함수

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

Provider로 감싸주지 않으면 오류남

numState

: state변수 num의 초기값을 설정하고 num 변수의 값을 변경하는 함수들을 정의

import { createSlice } from "@reduxjs/toolkit"

// num 변수에 저장할 초기값 
const initNum = {
  value : 0
}

// Slice : 변수의 초기화 및 함수 생성 
const numSlice=createSlice({
  
  // Slice를 구분하기 위한 Id
  name : 'num',

  // state변수에 저장될 초기값 
  initialState : initNum,

  // state 변수에 값을 변경하는 함수
  // 첫번째 매개변수 : state 변수가 가진 기존 값
  // 두번째 매개변수 : state 변수의 값을 변경할 데이터 
  reducers : {
    addNum : (state,action) => {
      state.value=state.value+1
    },
    subNum : (state,action) => {
      state.value=state.value-1
    },
    resetNum : (state,action) => {
      state.value=0
    },
    changeNum : (state,action) => {
      state.value=state.value+action.payload // payload가 실제 데이터 
    }
  }
})

// numSlice.actions : numSlice에 정의된 함수들 
export const numActions = numSlice.actions;

// numSlice.reducer : numSlice의 전체 내용
export const numReducter = numSlice.reducer;

store

import { configureStore } from "@reduxjs/toolkit";
import { numReducter } from "./numState";


// 모든 state변수를 저장하는 저장소

const store=configureStore({
  reducer : {
    numState : numReducter
  }
})

export default store;

useRedux

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { numActions } from './redux/numState'

const UseRedux = () => {
  // store에 저장된 state 변수 num 가져오기 

  // useSelector() : store에 저장한 state변수값 가져오기
  // 매개변수 state : store에 저장된 모든 state 변수
  const num = useSelector(state => state.numState.value)

  // useDispatch() : staet변수의 값을 변경시키는 함수 호출에 사용
  // store에 저장된 함수 호출을 위한 dispatch 생성 
  const dispatch = useDispatch()

  // +1 함수 
  const add = ()=>{
    dispatch(numActions.addNum())
  }




  return (
    <div>
      <h3>카운터 앱 (Redux 방식)</h3>
      <h3>{num}</h3>
      <div>
        <button type='button' onClick={()=>add()}>+1</button>
        <button type='button' onClick={()=>dispatch(numActions.subNum())}>-1</button>
        <button type='button' onClick={()=>dispatch(numActions.resetNum())}>RESET</button>
        <button type='button' onClick={()=>dispatch(numActions.changeNum(10))}>ChangeNum</button>
      </div>
    </div>
  )
}

export default UseRedux

member

memberState

import { createSlice } from "@reduxjs/toolkit"

// 회원 정보 초기값 세팅
const initMember = {
  memId : '',
  memName : '',
  memAge : 0
}

const memberSlice = createSlice({
  name : 'member',
  initialState : initMember,
  reducers : {
    changeMemberInfo : (state,action) => {
      state.memId = action.payload.memId
      state.memName = action.payload.memName
      state.memAge = action.payload.memAge
    },
    changeMemberName : (state,action) => {
      state.memName = action.payload
    }
  }
})

export const memberActions = memberSlice.actions
export const memberReducer = memberSlice.reducer

store

const store=configureStore({
  reducer : {
    numState : numReducter,
    memberState : memberReducer
  }
})

memberState : memberReducer 추가

member

import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { memberActions } from './redux/memberState'

const Member = () => {

  // 회원 정보를 저장하고 있는 변수
  const member = useSelector(state => state.memberState)
  const dispatch = useDispatch()

  useEffect(()=>{

    //DB에서 조회한 데이터
    const selectedMember = {
      memId : 'Dulli',
      memName : 'Go',
      memAge : 43
    }

    // 조회한 정보로 store 저장한 member 객체의 정보를 변경
    dispatch(memberActions.changeMemberInfo(selectedMember))

  },[])

  return (
    <div>

      <h3>회원 정보 페이지</h3>
      <div>
        <div>회원 아이디 : {member.memId}</div>
        <div>회원 이름 : {member.memName}</div>
        <div>회원 나이 : {member.memAge}</div>
      </div>

    </div>
  )
}

export default Member

Immer 라이브러리는 불변성을 쉽게 관리할 수 있도록 도와주는 라이브러리라는데 이게 있으면

changeMemberInfo : (state,action) => {
      state = action.payload
    },

이렇게 냅다 써도 된다더라

리덕스 이해하기

리액트에서 Redux 써보기