리덕스

사용목적

• 자바스크립트 상태관리 라이브러리
• 컴포넌트의 수가 많아지면 props 문법으로 한계가 있음! -> 리덕스 사용
• 컴포넌트 상태 관련 로직을 store.js 파일에 변수를 저장하여 분리시켜 효율적으로 관리 가능

관련 용어

Action

{
	type: "ADD_TODO"
  	data: {
    	id:0,
        text: "리덕스 배우기"
    }
}

• 상태에 어떤 변화가 필요할 때 발생시킴
• 객체 하나로 표현
• type 값 필수, 나머지는 옵션

Action Creator

export function addTodo(data){
	return {
    	type: "ADD_TODO"
        data
    };
}

• 액션 생성함수는 파라미터를 받아와 액션 객체 형태로 만들어주는 함수
• 컴포넌트에서 더욱 쉽게 액션을 발생시킬 수 있음

Reducer

function reducer(state, action){
	// 상태 업데이트 로직
    return alteredState;
}

• state 변화를 일으키는 함수
• 현재 상태와 전달받은 액션을 참고하여 새로운 상태를 리턴

store

• 리덕스에서는 한 애플리케이션 당 하나의 스토어
• 현재의 앱 상태, 리듀서, 추가적인 내장 함수를 가짐

dispatch

• 스토어의 내장 함수
• 액션을 발생 시키는 것
• 액션을 dispatch(action)메소드로 리듀서에 전달하고 리듀서가 스토어의 상태를 업데이트함

subscribe

• 스토어의 내장 함수
• subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출

3가지 규칙

1. 1 애플리케이션 1 스토어

• 하나의 어플리케이션 안에는 하나의 스토어가 있음

2. 상태는 read only!

• 기존 상태를 건들이지 않고 새로운 상태를 생성하여 업데이트 해주는 방식을 이용하여 불변성을 유지한다.

3. 변화를 일으키는 함수, 리듀서는 순수한 함수!

• 동일한 인풋 -> 동일한 아웃풋
• newDate(), 랜덤함수... 등 순수하지 않은 작업들은 리듀서 함수 밖에서 처리

실습

npm install redux --save
npm install react-redux --save
npm install @reduxjs/toolkit react-redux

먼저 리액트 프로젝트에 위 명령어로 모듈을 설치해준다

// react-redux 관련 모듈 import
import { Provider } from "react-redux";
import { legacy_createStore as createStore } from "redux";

설치해준 모듈을 import해주고 아래 코드를 포함하였다.

// currentState는 리듀서에서 관리된다
const currentState = {count:10, age:21};

// 리듀서 선언 부분
function reducer(state = currentState, action) {
    if(currentState == undefined) {
        return {count:10};
    }
    if(action.type == "changeCnt") {
        state.count = action.count;
    }
    if(action.type == "changeAge") {
        state.age = action.age;
    }
    if(action.type == "conunt증가") {
        state.count++;
    }
    if(action.type == "conunt감소") {
        state.count--;
    }
    if(action.type == "age증가") {
        state.age++;
    }
    if(action.type == "age감소") {
        state.age--;
    }
  
  	// 리액트의 불변성을 유지한다 !
    const newState = {...state};
    return newState;
}

// 스토어 생성
let store = createStore(reducer);

useSelector과 useDispatch

useSelector - 리덕스 스토어의 state를 조회하는 Hook

useDispatch - 리덕스 스토어의 dispatch를 함수에서 사용할 수 있게 해주는 Hook

import { useDispatch, useSelector } from 'react-redux';

function CntCtrl(props) {
  	// dispatch 선언
    const dispatch = useDispatch();
  
    const count = useSelector((state)=>{
        return state.count;
    })
    return (
        <>
            <fieldset>
                <h3>count Controller</h3>
                <p>
                    <input type="text" value={count} onChange={(e)=>{
                      // 액션을 디스패치  
                      dispatch({
                        type:"changeCnt", 
                        count:e.target.value
                      });
                    }} />
                </p>
                <button onClick={()=>{
                    dispatch({
                      type:"conunt증가"
                    });
                }}>증가</button>
                <button onClick={()=>{
                    dispatch({
                      type:"conunt감소"
                    });
                }}>감소</button>
            </fieldset>
        </>
    )
}

export default CntCtrl;

참고

https://react.vlpt.us/redux/01-keywords.html