08. react_redux

Redux 왜써?!

props 없이 state를 공유할 수 있게 도와주는 라이브러리
js파일 하나에 그냥 state 저장해놓고 모든 component가 직접 꺼내쓰는 거 가능
props 전송 안해도 된다~! 꺄륵

---

1. Redux Toolkit Install

1) Redux 설치

npm install @reduxjs/toolkit react-redux

※ 설치 전에 packge.json 열어서 react,react-dom 두개 18.1x 이상이면 사용가능

2)Redux 셋팅

(1) state 보관 파일 생성

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

store.js 파일(state 보관) 생성 후 상단 코드 복붙

(2) Provider component & state 보관 파일 import

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

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

2. Store에 State 보관

1) Redux store에 state 보관하기

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

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

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

2) Redux store에 있던 state 가져다쓰기

(Cart.js)

import { useSelector } from "react-redux"

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

  return (생략)
}

3. Store의 State 변경

1) store.js안에 state를 수정해주는 함수 생성

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

- reducers 안에 함수 만들어주기

• 함수 작명은 자유롭게
• 파라미터 하나 작명 시 기존 state 이 된다.
• return 우측에 new state 입력시 state 변경

2) export 해주기

export let { changeName } = user.actions

3) import 해주기 (dispatch 감싸서 사용)

(Cart.js)

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

(생략) 
let dispatch = useDispatch;
<button onClick={()=>{
  dispatch(changeName())
}}>버튼임</button>

4. State가 Object/Array일 경우 변경법
1) object/array 변경법

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

{name:'kim', age:20} 에서 name을 kim에서 park으로 바꾸고 싶다면

함수 속 return 옆에 변경사항 적기  return {name : 'park', age : 20}

※ state를 직접 수정해도 변경 가능
array/object의 경우 state는 직접 수정하도록!

 changeName(state){
      state.name = 'park'
    }

 

2) state 변경함수가 여러개 필요할땐?

파라미터문법 사용하기

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    increase(state, a){
      state.age += a.payload
      //파라미터 자리에 넣은 자료들은 a.payload 하면 나옴
    }
  }
})

※ 참고사항

• a -> action 작명 많이함
• action.type : state 변경 함수 이름 나옴
• action.payload : parameter 나옴

3) 파일 분할

코드가 길어서 보기 싫을 땐

강의 코드 중,

let user 변수와 state변경함수 export부분을 store폴더/userSlice.js로 뺌