Redux 흐름

도식화

• View : 상태 변화가 일어날시 리렌더링이 일어난다
• dispatch() : 변화는 디스패치를 통해서만, action 객체를 reducer에 전달한다.
• reduce : 실행결과를 store에 새로운 값을 저장한다.

예시 코드

// 보내는 코드 App.jsx
const App = () => {
	const dispatch = useDispatch();	// import from react-redux
	return (
    	<div>
        <button
        	onClick={() => {
            	// 상태 변화는 dispatch를 통해~
          		dispatch({		// action 객체 전해주기
                	type: "PLUS_ONE",
                });
          	}}
        >
        	+1
        </button>
                <button
        	onClick={() => {
            	// 상태 변화는 dispatch를 통해~
          		dispatch({		// action 객체 전해주기
                	type: "MINUS_ONE",
                });
          	}}
        >
        	-1
        </button>
      	</div>
    );
};

// 받는 코드
// src/redux/modules/counter.js
const initialState = {
	number: 0,
}

// 리듀서 (함수)
const counter = (state=initialState, action) => {
	switch (action.type) {
      	case "PLUS_ONE":
            return {
                number: state.number + 1;	// 여기서 잘 업데이트 됨
            }
        case "MINUS_ONE":
            return {
                number: state.number - 1;	// 여기서 잘 업데이트 됨
            }
      	default:
      		return state;	// 리듀서 함수는 반드시 return 존재함
    }
}

export default counter;

주요 개념

• action 객체는 반드시 type이라는 키를 가져야 하는 개체이며 리듀서로 보낼 명령이다.
  • 이 때의 type의 value를 대문자로 작성한다!
• dispatch는 리듀서로 전달하는 함수
  • useDispatch 훅을 사용하여 정의
  • 액션 객체를 매개변수로 전달
• reducer는 dispatch를 통해 전달받은 액션 객체를 검사하고, 조건이 일치했을 때 새로운 상태값을 만들어 내는 '변화를 만드는' 함수이다

마치며...

강의 노트 적는 속도가 너무 느리다ㅠㅠ
그래도 꾸준함이 중요한거니까
어떻게든 다 적는다!