[React] Redux

Redux란?

• 컴포넌트들이 props없이 state를 공유 가능하게 만들어주는 라이브러리
• react, react-dom 18.1 버전 이상 사용가능 (package.json 파일에서 확인, 버전 낮을 경우 직접 두개를 18.1.0으로 수정하기)
  

Redux 설치

npm install @reduxjs/toolkit react-redux

Redux 세팅

1. store.js 파일 생성
2. 하단 코드 입력

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
}) 

3. index.js 파일가서 Provider 라는 컴포넌트와 아까 작성한 파일을 import 해온 후 밑에 <Provider store={import해온거}> 이걸로 <App/> 을 감싸기

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

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

Store 안에 state 보관하는법

1. crateSlice() 상단에서 import 해온다음에 {데이터}넣어주기
2. configureStore()안에 {작명: 데이터변수.reducer}로 등록하기

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

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

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

Redux store에 있던 state 가져다쓰는 법

1. state 사용하고 싶은 파일 상단에 useSelector import 해주기
2. useSelector((state) => { return state }) 로 데이터 가져오기

import { useSelector } from "react-redux"

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

store의 state 변경하는법

1. store.js 안에 state 수정해주는 함수를 만든다.

• slice 안에 reducers : { 함수 }
• 함수 작명 자유
• return 우측에 입력한 값으로 기존 state 바꿔줌

let user = createSlice({
  name : 'user',
  initialState : 'kim',
  reducers : {
    changeName(state){
      return 'john ' + state(기존 state)
    }
  }
}) 

2. 변경함수 export

• store.js 밑에 하단 코드 추가 (state 변경함수 모두 출력)

export let { changeName } = slice이름.actions

3. 원할 때 import해서 사용(단, dispatch()로 감싸야함)

• store.js에서 원하는 변경함수 가져오기
• unsDispatch 라이브러리에서 가져오기
• dispatch(state변경함수()) 실행

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

(생략) 

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

redux state가 array/object인 경우 변경

• state를 직접 수정하기

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

• 파라미터 문법 사용
  :action을 매개변수로 , 사용시에는 action.payload로 매개변수 사용

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