리액트에서 리덕스로 상태관리하기

❓ 리덕스는 무엇인가

리덕스는 상태관리 라이브러리다. 상태관리 로직을 분리시켜서 효율적으로 관리할 수도 있고, 전역 값 관리도 손쉽게 할 수 있다.

하지만 모든 경우에 리덕스를 사용할 필요는 없다. 관리해야 할 전역 값이 별로 없다면 (state가 많이 변경되지 않는다면) ContextAPI를 써도 좋다. (https://actually-i-am.tistory.com/56)

프로젝트의 규모가 크거나 (관리해야 할 전역값이 자주 변경되거나), 비동기 작업이 자주 필요하다면 리덕스 사용을 고려해보자.

👍 리액트에서 리덕스로 상태관리 하는 장점

1. 미들웨어
   • 비동기 작업을 더욱 체계적으로 관리 가능
2. 유용한 함수와, Hooks를 지원받을 수 있다.
   • ContextAPI는 직접 만들어서 썼다
   • 리덕스 툴킷같은거
   • ex.
     • connect
     • useSelector
     • useDispatch
     • useStore
3. 기본적인 최적화가 이미 되어있다.
4. DevTools
   • 리덕스는 아주 유용한 개발자 도구가 있다.
   • 현재 상태를 한 눈에 볼 수 있고, 지금까지 어떤 변화가 있었는지 볼 수 있다.

📌 리덕스 구조

📚 사용 방법

사용 방법은 ContextAPI와 useReducer를 함께 사용하는 것과 비슷하다.

리덕스

1. redux 패키지 설치
2. 리듀서 함수 만들기

   • // state 초기상태를 만들떄 reducer를 한 번 호출하기 때문에. default상태를 넣어둬야 한다.
     function reducer(state = initialState, action) {
       switch (action.type) {
         case "INCREASE":
           return {
             ...state,
             count: state.count + 1,
           };
         case "DECREASE":
           return {
             ...state,
             count: state.count - 1,
           };
         case "CHANGE_TEXT":
           return {
             ...state,
             text: action.text,
           };
         case "ADD_TO_LIST":
           return {
             ...state,
             list: state.list.concat(action.item),
           };
         default:
           return state;
       }
     }

3. 스토어 만들기

   • import { createStore } from "redux";

   • const store = createStore(reducer);

4. 상태 불러오고 디스패치하기
5. // store에서 값 확인하기 console.log(store.getState()); store.dispatch({ type: "INCREASE", });

---

• 번외 :
  • subscribe하기

    • // 구독하고 dispatch하기
      const listener = () => {
        const state = store.getState();
        console.log(state);
      };
      
      const unsubscribe = store.subscribe(listener);
      // 해제하고 싶을 떄는 unsubscribe();

리액트에서의 리덕스

1. react-redux라는 패키지를 설치해야 한다.
2. Provider, createStore, reducer불러오기....
   1. 리듀서를 만들어서 합치고
      1. 리듀서 만들기

         • export default function counter(state = initialState, action) {
             switch (action.type) {
               case SET_DIFF:
                 return { ...state, diff: action.diff };
               case INCREASE:
                 return { ...state, number: state.number + state.diff };
               case DECREASE:
                 return { ...state, number: state.number - state.diff };
               default:
                 return state;
             }
           }

      2. 합치기

         • import { combineReducers } from "redux";
           
           const rootReducer = combineReducers({
             counter,
             todos,
           });

   2. 스토어를 만들어서 컴포넌트에 제공한다
      1. 스토어 만들기 : createStore

         • import { createStore } from "redux";
           
           const store = createStore(rootReducer);

      2. 컴포넌트 제공하기 : Provider

         • import { Provider } from "react-redux";

         • ReactDOM.render(
             <Provider store={store}>
               <Container />
             </Provider>,
             document.getElementById("root")
           );

3. 값 사용하고 변경하기
   • useSelector

     • import { useSelector } from "react-redux";

     • // 리액트 함수 컴포넌트 안 ...
       const { number, diff } = useSelector((state) => ({
           number: state.counter.number,
           diff: state.counter.diff,
         }));

   • useDisptach

     • import { useDispatch } from "react-redux";

     • // 리액트 함수 컴포넌트 안...
       const dispatch = useDispatch();

---

♟ 리덕스의 3가지 규칙

1. 하나의 애플리케이션엔 하나의 스토어가 있다.
2. 상태는 읽기전용 입니다. (불변성을 지켜야 한다.)
3. 변화를 일으키는 함수 리듀서는 순수한 함수여야 합니다.
   • 리듀서 함수는 이전 상태와, 액션 객체를 파라미터로 받는다.
   • 이전의 상태는 절대로 변경하지 않고, 변화를 일으킨 새로운 상태 객체를 만들어서 반환한다.
   • 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환해야만 한다. (동일한 인풋->동일한 아웃풋)
     • new Date(), Math.random(), axios.get()을 사용해선 안 된다.
       • 이런 작업은 컴포넌트 단에서 하거나, 미들웨어를 써야 한다.
     • 리듀서 밖에 있는 변수에 의존해서도 안 된다.

📖 요약

• 사용 이유
  • 전역 상태를 관리하기 쉽다. 관리해야할 상태가 많을 경우 유용하다.
  • 미들웨어를 사용하여 비동기 처리가 쉽다.
  • 유용한 함수와 hook들을 사용할 수 있다.
• 사용 방법
  1. 리듀서 함수를 만들어서 스토어 만들기 : createStore
  2. 스토어를 컴포넌트에 제공하기 : Provider
  3. 상태값을 불러오고, 변경하기 : useSelector, useDispatch

---

• 참고
  • https://react.vlpt.us/redux/
  • https://opentutorials.org/module/4078/24935