[react] Redux

October 7, 2022

redux는 전역 상태관리 라이브러리입니다.

State를 전역 상태로 만들어 관리하여 불필요한 props drilling을 줄인다.

공식문서 : https://ko.redux.js.org/

사용하기 : 사전준비

설치하기

redux와 react-redux를 함께 설치한다. react-redux는 redux와 react를 연결해주는 기능을 한다.
```
npm install redux react-redux
```
```
yarn add redux react-redux
```
폴더/파일구조 만들기

3개의 폴더와 1개의 js파일을 만든다.
- src/redux : redux와 관계된 코드 파일의 폴더
- src/redux/config : redux 설정과 관련된 파일의 폴더
- src/redux/config/configStore.js : Store ( 중앙State관리소 ) 를 만드는 설정파일들의 폴더
- src/redux/modules : state와 action을 그룹지어 만든 module을 모아둔 폴더

설정 코드 작성

src/redux/config/configStore.js

import { createStore } from "redux";
import { combineReducers } from "redux";
import REDUCER_NAME from 'REDUCER_PATH'
    
// 다수의 REDUCER를 rootReducer로 병합한다.
const rootReducer = combineReducers({
    REDUCER_NAME:REDUCER_NAME
});
// 병합한 REDUCER를 Store로 만든다.
const store = createStore(rootReducer);
    
export default store;

index.js

import store from "./redux/config/configStore";
import { Provider } from "react-redux";
    
// Store를 매개변수로 갖는 Provider라는 컴포넌트를 App의 부모 컴포넌트로 만든다.
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

Module 작성

src/redux/modules폴더 내에 생성한다. state object의 원형과 이의 action을 정의한다.

모듈명은 기능의 이름을 따서 생성한다.

// Action value
// state의 action 이름을 상수로 가지고 있는 값. 
const PLUS_ONE = "PLUS_ONE";
  
// Action Creator
// action 이름과 매개변수를 객체로 반환하는 함수. dispatch와 함께 import하여 사용된다.
export const plusOne = (payload) => { 
  return {
    type: PLUS_ONE, // type에는 위에서 만든 상수로 사용 (vscode에서 자동완성 지원)
    payload
  };
};
  
// initialState
// state 초기값을 갖는 객체. 생략하고 reducer에 바로 기재해도 된다.
const initialState = {
  number: 0,
};
  
// reducer
// rootReducer에 들어갈 함수. state와 state의 action을 가지고 있고, action이름을 사용하여 다수의 action을 사용할 수 있다.
export default const counter = (state = initialState, action) => {
  switch (action.type) {
    case "PLUS_ONE":
    default:
      return state;
  }
};

사용하기

useSelector : Store의 값을 가져올 때 사용한다.

import { useSelector } from 'react-redux'
useSelector(state => state)		//  Store의 내용을 object형태로 반환한다.

useDispatch : reducer의 action을 사용할 수 있게 한다.

import { useDispatch } from 'react-redux'
  
const dispatch = useDispatch()	// Dispatch 생성
dispatch({type: "ACTION_NAME", payload: 매개변수로 전달하고자하는 값})

import { useDispatch } from 'react-redux'
import { ACTION_NAME } from 'MODULE_PATH'
  
const dispatch = useDispatch()	// Dispatch 생성
  
dispatch(ACTION_NAME(매개변수값))

※ 매개변수로 전달할 값이 없다면 생략해도 된다.

출처

https://www.youtube.com/watch?v=yjuwpf7VH74

Rose

사용하기 : 사전준비

사용하기

출처