🌙  새벽공부

Redux

프론트엔드 기술의 발달로 웹 애플리케이션이 고도화 되면서, 규모에 맞는 안정적인 상태 관리 패턴이 필요해졌다. 예측 불가능성을 해결하고자, 단방향의 흐름으로 예측 가능하게 만들기 위해 나왔다.
즉, 상태 관리 방법론 개선을 위해 나왔다.

🤔 Redux는 언제쓸까?

기본 React 기능만으로 대응하기 힘들 정도로 상태관리가 복잡해졌다고 확실히 판단이 되었을 때 사용하라고 공식문서에 나와있다.

Redux 3가지 규칙

1) 하나의 객체 트리 구조로 저장

모든 상태는 하나의 저장소 안에 저장

2) 상태는 읽기 전용

리덕스의 상탯값을 수정하는 유일한 방법은 액션 객체와 함께 dispatch를 호출하는 것 (마치 setState)이다.
변화에 대한 예측 가능성을 얻을 수 있다.

• Dispatch가 호출된 순서대로 상태를 변경하여 변경된 순서와 내역을 쉽게 관리한다.
• Action 객체는 평범한 자바스크립트 객체이며, 이 객체가 Store에 입력된 순서와 내용을 저장해두면 나중에 그 과정을 쉽게 재현할 수 있다.

3) 변화는 순수 함수로 작성 되어야한다.

🤔 순수함수 란?

보자마자 어떤 값이 나올지 예상 가능한 함수이다.

// 예측 가능 = 순수 함수
const add = (num) => num + 1;
add(1)

// 예츨 불가능 ≠ 순수 함수
const add2 = (num) => num + Math.random();
add2(1)

Redux 사용을 위한 키워드 숙지

1) Action

필수값 (그 외에는 개발자 마음대로)
상태에 어떠한 변화가 필요하게 될 때, 액션을 발생시킨다. 객체로 표현된다.

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

2) Action Creator 액션 생성 함수

액션을 만드는 함수이다.
파라미터 받아와서 액션 객체 형태로 만들어준다.

• 쉽게 액션을 발생시키기 위함
• 실수를 줄여주기 위함 → 정해진 파라미터로 받아서 사용하기 때문

export const addCart = (item) => { // 액션 "생성 함수"
  return {
    type: "ADD_ITEM", // 액션 "객체"
    payload: item,
  };
};

보통 함수 앞에 export 키워드를 붙여서 다른 파일에서 불러와서 사용한다.

3) Dispatcher

Action 객체를 Reducer에 보내는 역할을 하는 함수이다.
스토어의 내장함수 → store.dispatch() 형태로 제공한다.
반드시 동기적으로 처리되어야 한다.

4) Reducer

리듀서는 변화를 일으키는 함수로 이전 상탯값과 액션 객체를 입력으로 받아 새로운 상탯값을 만드는 순수 함수이다. 예측 가능해야 한다.
리듀서는 두가지의 파라미터를 받아온다. (previousState, action) => newState 이런 형태이다.

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

정리, 현재의 상태와, 전달 받은 액션을 참고하여 새로운 상태를 만들어서 반환한다.

5) Store

• Redux 앱 전체의 상태로 보통 깊게 중첩되어 있는 객체이다.
• store에서 관리되고, store.getState()로 읽어올 수 있다.
• 항상 직렬화(Serialization) 가능해야 하기 때문에 JSON으로 쉽게 변환할 수 없는 것들은 제외하는게 좋다(ex. 함수, Promise 등)

코드 예시 (+설명)

const INITIAL_STATE = [];

// redux/cart.js
export default function cartReducer(state = INITIAL_STATE, action) { 
// 인자로 state, action 
// state = INITIAL_STATE -> 첫번째 값으로 인자 안들어오면 INITIAL_STATE를 쓰겠다 (useState() 초기값과 유사)
  
	switch (action.type) {
	// switch -> if 문이랑 유사, 개념 확실히 몰라도 됨
	// action.type 에 따라서 다른 처리를 할 것이다.
    
		case "ADD_ITEM": // action.type이 "ADD_ITEM"이면
      return [...state, action.payload]; // 이전 상태 복사한 다음에 새로운 item을 추가
    
		case "DELETE_ITEM": // action.type이 "DELETE_ITEM"이면
      return state.filter((product) => product.id !== payload.id); 
			// 이전 state에 filter 메소드로 id 랑 똑같은 것들 지운 뒤 새로 상태 저장
    
		default: // 기본값 설정 -> 만약에 action.type에 걸리는게 아무것도 없을 경우를 방지하기 위함
      return state; // 해당 사항 없으면 이전 상태를 그대로 리턴
  }
}

// redux/index.js
import { combineReducers } from "redux";
import cartReducer from "./cartReducer";

export default combineReducers({ cartReducer });

---

Redux란

1. View에서 유저가 일으키는 행동에 맞게 Action 객체가 생성되고,
2. Action은 Dispatcher를 통해 Reducer로 전달되고,
3. Action의 type에 따라 Reducer 내에 미리 정해져 있던 로직이 Store를 변경하고,
4. 변경된 Store의 내용이 View로 반영되는 패턴이라고 요약할 수 있다.