[Redux] 리덕스

SMALL

Redux란?

리액트 생태계에서 가장 사용률이 높은 상태 관리 라이브러리입니다. 리덕스를 이용하면 컴포넌트의 상태 관련 로직을 다른 파일로 분리시켜서 효율적인 관리에 도움을 줍니다.

Context API와 useReducer를 사용하여 개발하는 것과 방식이 비슷합니다. Context API가 개선되기 전에 글로벌 상태 관리를 위해 많이 사용되어 왔었습니다.

리덕스를 사용하면 좋을 때

프로젝트의 규모가 클 때
비동기 작업을 자주 할 때
리덕스가 편할 때

Redux Action

상태에 변화가 필요하게 될 때, 액션을 발생시기게 됩니다.

액션 생성자를 통해 액션을 만듭니다.
액션 객체를 리덕스 스토어로 보냅니다.
리덕스 스토어가 액션 객체를 받으면 스토어 상태값이 변경됩니다.
변경된 상태값에 의해 상태를 이용하는 컴포넌트가 변경됩니다.

actions.js

export const ADD_TODO = "ADD_TODO";

function addTodo(todo) {
	return {
    	type: ADD_TODO,	
        todo,
    };
}

Redux Reducers

액션을 주면 적용되어 결과를 만들어 줍니다. => 변화를 만들어 내는 함수.

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

function reducer(state, action) {
	return newState;
}

액션을 받아 state를 리턴.
인자로 들어오는 state와 리턴되는 newState는 다른 참조를 가져야 함.

reducers.js

import { ADD_TODO } from "./actions";
// state
// ['영단어 외우기', '운동하기'];
const initialState = [];

export function todoApp(state = initialState, action) {    // state가 undefined일 때
    if (action.type === ADD_TODO) {
		return [...state, action.todo];    	
    }
    
    return state;
}

createStore

스토어를 만드는 함수 입니다. 리덕스는 애플리케이션당 하나의 스토어를 만듭니다. 스토어에는 현재 앱 상태와 리듀서가 들어있고, 내장 함수들이 들어 있습니다.

store.js

import { createStore } from 'redux';
import { todoApp } from './reducers';

const store = createStore(todoApp);

export default store;

index.js

.
.
.

import store from "./redux/store";
import { addTodo } from "./redux/actions";

const unsubscribe = store.subscribe(() => {
	console.log(store.getState());
}); 

store.dispatch(addTodo("영단어 외우기"));  
store.dispatch(addTodo("운동"));  
store.dispatch(addTodo("독서"));  
unsubscribe();
store.dispatch(addTodo("점심"));  // store에는 변경되고 console.log함수 실행 안됨.
.   
. 
.

store.subscribe는 스토어의 상태가 변경되면 내부 함수가 호출됩니다. dispatch가 일어날 때 마다 store.getState()가 호출되게 됩니다. store.subscribe함수는 구독을 취소하는 함수를 리턴합니다. 구독을 취소하게 되면 dispatch가 일어나면 store의 상태만 변경됩니다.

Something