[Redux] 리덕스 원리 이해하기

🤔 리덕스란 몰까..? 그리고 왜 사용하는 걸까?

https://ko.redux.js.org/

Redux - 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. | Redux

프로젝트의 depth 가 깊어지면서 컴포넌트간에 state를 주고 받고, 넘나드는 것이 점점 복잡해진다..

이를 해결 하기 위해 최상위 컴포넌트에서 전역변수로 한꺼번에 선언해서 여러 곳에서 사용하기 위해 사용한다.

리덕스를 사용하게 되면, state로 일일히 선언하지 않아도 된다!

redux cycle - store를 기준으로 "단방향"으로 작동한다.

👉 리덕스의 장점

- action을 실행할 때 dispatch 의 히스토리를 확인할 수 있다.(에러 핸들링에 용이)

- git reset 처럼 이전 action으로 되돌릴 수 있다.

   (단, state가 불변성을 유지한다는 전제가 있어야 함)

 

🔻단점은 뭐가 있을까?

- action들이 미리 정의가 되어있어야 한다. 

- 불변성이 유지되어야 하는 state의 특성때문에 객체를 매번 새로 만들어줘야 한다.

 

👉 리듀서(reducer)..? 그건 또 뭔데?

리덕스의 단점을 보완, 불변성의 속성을 유지하기 위해 나온 개념이다.

action이 실행된 후, 새로운 객체(object)를 만드는 역할이며, 기존에 저장된 state가 새로운 객체로 대체된다.

- state와 action을 인자로 가지고, next_state 값을 리턴하는 함수

  (* 즉, state와 action을 연결하는 역할을 수행한다.)

 

👉 dispatch와 reducer 사이에 있음 : middleware

 

[Example]

(1) 스토어 생성하기 - createStore

const { createStore } = require('redux');

//리듀서는 함수
const reducer = () => {};

//초기값
const initialState = {
  id: 1,
  name: 'John',
  age: 20,
  is_admin: null,
};

//스토어 생성 createStore(리듀서, 초기값, ...)
const store = createStore(reducer, initialState);

//콘솔로 찍어보기
console.log(store.getState());

vscode description of createStore

(2) action 정의하기

//action ~ object형
//액션은 추상적으로 만들어야 한다. (확장이 가능하도록 구현하는 것이 핵심)

const '액션 정의' = {
	type: '액션 이름',
	data: '바꾸는 데이터 값',
	payload,
	error,
	result,
}

//동적으로 액션을 바꾸기 위해 함수형으로 만든 모습 - 재사용성
const changeAction = (data) => {
	return { //action - 액션은 object다.
    	type: 'CAHNGE_A',
        data,
    }
}

(3) dispatch 적용

//(1) action 생성 함수 사용할 경우
store.dispatch(changeAdminAccess('Jully'));


//(2) 사용하지 않을 경우
store.dispatch({
	type: 'CHANGE_USER_NAME',
	data: 'Jully',
});

(4) reducer 만들기

const reducer = (prevState, action) => {
  //action 을 받아서 새로운 state를 만들어준다.
  //action 이 많아지면 case들이 점점 늘어남
  switch (action.type) {
    case 'CHANGE_USER_NAME':
      return {
        id: 1,
        name: action.data,
        age: 20,
        is_admin: null,
      };
    case 'CHANGE_USER_AGE':
      return {
        id: 1,
        name: 'John',
        age: action.data,
        is_admin: null,
      };
  }
};