220326 Redux 사용방법

• 리덕스가 무엇인지, 용어들은 어떤 것들이 있는지 알아봤다

  • https://velog.io/@nulee1000/220325-%EB%A6%AC%EB%8D%95%EC%8A%A4

• 오늘은 리덕스의 사용방법에 대해 알아보자

✅ 리덕스 설정하기

1. Redux 패키지 설치하기

• 리덕스를 사용하려는 프로젝트에서
  다음 명령어를 입력한다

yarn add redux react-redux

• redux : 리덕스 패키지
• react-redux : 리액트에서 리덕스를 편하게 쓸 수 있게 해주는 패키지

2. 리덕스 모듈 생성

• 보통 리덕스를 사용할 때는, 모양새대로 aciton, actionCreator, reducer를 분리해서 작성한다
  (액션은 액션끼리, 액션생성함수는 액션생성함수끼리, 리듀서는 리듀서끼리 작성)

• 덕스 구조는 모양새로 묶는 대신 기능으로 묶어 작성

  • 같은 기능을 가진 action, actionCreator, reducer를 한 파일어 넣는 것

• 덕스구조의 예시는 다음과 같다

// widgets.js

// 액션 타입 정의
const LOAD   = 'my-app/widgets/LOAD';
const CREATE = 'my-app/widgets/CREATE';
const UPDATE = 'my-app/widgets/UPDATE';
const REMOVE = 'my-app/widgets/REMOVE';

// 액션 생성함수 정의
export function loadWidgets() {
  return { type: LOAD };
}

export function createWidget(widget) {
  return { type: CREATE, widget };
}

export function updateWidget(widget) {
  return { type: UPDATE, widget };
}

export function removeWidget(widget) {
  return { type: REMOVE, widget };
}

// 초기값정의
const initialState = {
  a: 'b',
  c: 'd',
}

// 리듀서 작성
export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    // do reducer stuff
    default: return state;
  }
}

// side effects, only as applicable
// e.g. thunks, epics, etc
export function getWidget () {
  return dispatch => get('/widget').then(widget => dispatch(updateWidget(widget)))
}

3. Action 타입 정의

// Action 타입 정의
const LOAD   = 'my-app/widgets/LOAD';
const CREATE = 'my-app/widgets/CREATE';
const UPDATE = 'my-app/widgets/UPDATE';
const REMOVE = 'my-app/widgets/REMOVE';

• 덕스 구조를 사용할 땐, 위와 같이 문자열의 앞부분에 모듈 이름을 넣는다
• 이는 다른 모듈에서 작성하게 될 수도 있는 액션들과 충돌하지 않기 위함이다

4. Action 생성함수 정의하기

// 액션 생성함수 정의
export function loadWidgets() {
  return { type: LOAD };
}

export function createWidget(widget) {
  return { type: CREATE, widget };
}

export function updateWidget(widget) {
  return { type: UPDATE, widget };
}

export function removeWidget(widget) {
  return { type: REMOVE, widget };
}

• 위에서 정의했던 액션 타입에 따라 액션 생성함수를 만든다
• 액션 생성함수를 정의할 땐, 위와 같이 꼭 export를 붙여줘야한다
• 여기서 만든 함수들은 컴포넌트에 리덕스를 연동하고 불러와서 사용한다

5. 초기값, 리듀서 작성

// 초기상태 정의
const initialState = {
  a: 'b',
  c: 'd',
}

// 리듀서 작성
export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    // do reducer stuff
    default: return state;
  }
}

• 초기값으로 사용할 변수를 정의하고
• 리듀서의 파라미터로 초기값을 넣어준다
• {}처럼 빈 값으로 둬도 된다

스토어 만들기

1. combineReducers로 리듀서 합치기

• 리듀서가 여러개일 때는 redux의 내장 함수인 combineReducers를 사용하여
  리듀서를 하나로 합치는 작업을 한다

• 여러개로 나뉘어진 리듀서들을 서브리듀서라고 부르고,
  하나로 합쳐진 리듀서를 루트리듀서라고 한다

• 먼저 프로젝트/src/redux 디렉토리에 configStore.js를 만들자

import { combineReducers } from 'redux';
import dic from "./modules/dic";
// 위의 코드는 위에서 작성한 모듈

export default combineReducers({
  moudle1,
  // 다른 리듀서를 만들게되면 여기에 넣어준다
});

2. 스토어 만들기

• 하나의 애플리케이션 안에는 하나의 스토어라는 규칙에 따라서
• configStore.js에 스토어를 한번만 만들면 된다

import { createStore, combineReducers } from "redux";
import dic from "./modules/dic";

const rootReducer = combineReducers({ dic });
const enhancer = applyMiddleware(...middlewares);

//이 부분이 스토어를 만들고 선언하는 부분
const store = createStore(rootReducer);
export default store;

• 앱이 시작되는 index.js에서 import하고 사용할 거라,
  export default 해준다

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import store from "./redux/configStore";
ReactDOM.render(
  <Provider store={store}>
      <App />
  </Provider>,
  document.getElementById("root")
);

• react-redux 패키지의 컴포넌트인 Provider로 최상위 컴포넌트인 app을 감싸고,
  props로 위에서 만든 store를 내려보낸다

• 이 부분은 리액트 프로젝트의 앱이 시작되는 index.js에서 작성해도 된다

✅ 컴포넌트에서 리덕스 데이터 사용하기

• 리덕스에도 '리덕스 훅'이라고 불리는 훅이 존재한다
  • 데이터를 가지고 오는 훅인 useSelector
    • connect함수를 이용하지 않고 리덕스의 state를 조회할 수 있다.
  • 데이터를 업데이트 하는 훅인 useDispatch
    • 생성한 action을 useDispatch를 통해 발생시킬 수 있다

import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";

function Home() {
  const dicWord = useSelector((state) => state.dic.list);
}
const dispatch = useDispatch();

• useState 안에 들어가는 state는 리덕스가 가진 전체 데이터를 의미한다
• 이런 방법으로 사용하면 된다