✨ React 정리 - 11) Redux, Redux Tool Kit ✨

✔️ Redux, Redux ToolKit

props없이 state를 공유할 수 있게 도와주는 라이브러리입니다.
한 js파일에 state들을 보관할 수 있게되며 <Provider>태그에 감싼 컴포넌트들은 props 전송 없이 state를 공유합니다.

컴포넌트간 공유가 필요없는 state는 redux store에 담지 않고 각 컴포넌트에서 직접 선언하여 사용하는 것이 더 간단할 수 있습니다.

설치방법

주의!

package.json에서 react와 react-dom의 버전이 18.1.X 이상인지 확인!

1. 터미널에서 해당 코드 입력

2. state를 보관할 js 파일 생성

3. 해당 코드 보관할 js 파일에 복사

(store.js)

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
}) 

4. index.js 파일에서 Provider import 후 Provider 태그로 감싸고 store={불러올 파일.js} 추가

App컴포넌트와 자식 컴포넌트는 store.js에 있는 state 전부 사용 가능

store에 state보관하고 쓰는 법

createSlice()에 name 속성 : state이름, initialState 속성 : 해당 state의 값을 추가하고 변수에 담습니다.

(store.js)

import { createSlice } from '@reduxjs/toolkit';

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

let inven = createSlice({
  name: 'inven',
  initialState: [10, 11, 12],
});

configureStor()에서 변수를 reducer: {}안에 새롭게 사용할 변수명(위에 변수명과 동일해도 무방) : 위에서사용한변수명.reducer 해당 규격에 맞춰 추가합니다.

(store.js)

export default configureStore({
  reducer: {
    user : user.reducer,
    inven: inven.reducer,
  },
});

사용할 컴포넌트에서 uesSelector((state) => { return 값 });으로 state를 가져옵니다.
파라미터인 state는 reducer한 모든 state를 가져옵니다.

(App.js)

import { useSelector } from 'react-redux';

let userName = useSelector((state) => {
	return state.name;
});
let inven = useSelector((state) => {
	return state.inven;
});
console.log(inven);
console.log(userName);

state 변경하는 방법

1. state 수정하는 함수 만들기

바꿀 state안에 redcuers : {} 추가하고, 수정하는 함수명(){}를 추가한다. 수정하는 함수명(파라미터)에 해당하는 파라미터는 기존의 state를 뜻한다.

(store.js)

import { createSlice } from '@reduxjs/toolkit';

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

2. 만든 함수 export

export 변수선언 { export할 함수들1, 2, 3 } = state변수명.actions

export let { setName } = userName.actions;

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

state 담은 js 파일에서 state변경함수 export하고,
useDispatch() 함수를 react-redux 라이브러리에서 import 하고,
dispatch( state변경함수() ) 이렇게 감싸서 실행

(Cart.js)

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

(생략) 

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

4. 파라미터의 payload 사용

파라미터 문법을 사용해서 하나의 함수로 비슷한 state 변경 함수를 여러개를 충족시킬 수 있습니다.
state변경함수 = action이라고 해서 파라미터를 action으로 많이 작명합니다.

(store.js)

plusAge(state, action) {
      state.age += action.payload;
    },
export let { setName, plusAge } = user.actions;
-------
(Cart.js)

<button onClick={() => { dispatch(plusAge(15)); }}> 1살 추가 </button>