[도서] 리액트를 다루는 기술 #리액트 없이 쓰는 리덕스

 

 

 

16.2 리액트 없이 쓰는 리덕스

 

- 리덕스는 리액트에 종속되는 라이브러리가 아니다.

- angular-redux, ember redux, Vue에서도 사용 가능, Vue에서는 리덕스와 유사한 vuex를 주로 사용

- 바닐라(vanilla) 자바스크립트와 함께 사용할 수도 있다.

 

 

🔷 바닐라 자바스크립트 : 라이브러리나 프레임워크 없이 사용하는 순수 자바스크립트 그 자체

 

 

1️⃣ 액션 타입과 액션 생성 함수 정의

 

- 액션 : 프로젝트의 상태에 변화를 일으키는 것

- 액션 이름 : 문자열 형태, 주로 대문자 작성, 고유해야 한다.

- 액션 객체 : 반드시 type 값을 갖고 있어야 하며, 그 외에 추후 상태를 업데이트할 때 참고하고 싶은 값은 마음대로 넣을 수 있다.

 

 

// 액션 이름

const TOGGLE_SWITCH = "TOGGLE_SWITCH";
const INCREASE = "INCREASE";
const DECREASE = "DECREASE";

// 액션 생성 함수

const toggleSwitch = () => ({type: TOGGLE_SWITCH});
const increase = difference => ({type: INCREASE, difference});
const decrease = () => ({type: DECREASE});

 

 

2️⃣ 초깃값 설정

 

- 초기값의 형태는 자유

- 숫자일 수도 있고 문자열일 수도 있고 객체일 수도 있다.

 

 

 

3️⃣ 리듀서 함수 정의

 

- 리듀서 : 변화를 일으키는 함수

- 함수 파라미터 : state, action

 

 

// state가 undefined일 때는 initialState를 기본값으로 사용
function reducer(state = initialState, action){
	// action.type에 따라 다른 작업 처리
    switch(action.type){
    	case TOGGLE_SWITCH:
        	return{
            	...state, // 불변성 유지를 해주어야 한다.
                toggle: !state.toggle
            };
    }
}

 

 

- 리듀서 함수가 맨 처음 호출될 때는 state값이 undefined

- 해당 값이 undefined로 주어졌을 때는 initialState를 기본값으로 설정하기 위해 함수의 파라미터 쪽에 기본값 설정

- 상태의 불변성을 유지하면서 데이터에 변화를 주어야 한다 => spread 연산자(..)사용하면 편하다.

- 객체의 구조가 복잡해지면  spread 연산자로 불변성을 관리하며 업데이트 하는 것이 굉장히 번거로울 수 있고 코드의 가독성도 나빠지기 때문에 리덕스의 상태는 최대한 깊지 않은 구조로 진행하는 것이 좋다.

- 객체의 구조가 복잡해지거나 배열도 함께 다루는 경우 immer 라이브러리를 사용하면 좀 더 쉽게 리듀서를 작성할 수 있다.

 

 

 

4️⃣ 스토어 만들기

 

- createStore 함수 사용

- 파라미터에는 리듀서 함수를 넣어 준다.

 

 

5️⃣ render 함수 만들기

 

- 상태가 업데이트될 때마다 호출

- 리액트의 render함수와는 다르게 이미 html을 사용하여 만들어진 UI의 속성을 상태에 따라 변경해준다.

 

const render = () => {
	const state = store.getState(); //현재 상태를 불러온다.
    // 
}

render();

 

 

6️⃣ 구독하기

 

- subscribe 함수의 파라미터로는 함수 형태의 값을 전달해준다.

 

const listener = () => {
	console.log("상태 업데이트");
}

const unsubscribe = store.subscribe(listener);

unsubscribe();

 

- 컴포넌트에서 리덕스 상태를 조회하는 과정에서 react-redux라는 라이브러리가 이 작업을 대신해주어 직접 사용하지 않을 수 있다.

 

 

 

7️⃣ 액션 발생시키기

 

- 디스패치 : 액션을 발생시키는 것

- 파라미터는 액션 객체를 넣어주면 된다.

 

 

 

#출처 : 리액트를 다루는 기술(저자 : 김민준 VELOPERT)