[리덕스] 리덕스 정리

hoya.a·2022년 4월 11일

thunk 리덕스

리액트

목록 보기

3/4

리덕스는 액션이 날라오면 리듀서가 스토어의 상태를 변경시키는 방식으로 동작한다.

덕스(Ducks)구조

보통 리덕스를 사용할 때는 모양새대로 action, actionCreator reducer 를 분리해서 작성한다.
ex) 액션은 액션끼리 액션생성함수는 생성함수끼리 리듀서는 리듀서끼리

하지만 덕스구조는 모양새대신에 기능으로 묶어서 작성한다.
ex) 같은 기능을가진 액션 액션생성함수 리듀서를 한파일에

Ducks구조 참고 사이트

1) Action

//액션 타입을 정해준다.
const LOAD = "bucket/LOAD";
const CREATE = "bucket/CREATE";

initialState : 초기 상태값을 만들어준다.

//초기 상태값을 만들어줍니다.
const initialState = {
	list: ["영화관 가기", "매일 책읽기", "수영 배우기"],
};

2) ActionCreator

//액션 만들어줄 함수
export const loadBucket = (bucket) => {
	return {type: LOAD, bucket };
};

export const createBucket = (bucket) => {
	return { type: CREATE, bucket };
};

3) Reducer : 실질적으로 스토어에 들어가 있는 데이터를 변경하는 곳

4) store

//configStore.js
import { createStore, combineReducers } from "redux";
import bucket from "./modules/bucket";

//root 리듀서 만들기
//리듀서를 여러개 만들면 여기에 하나씩 추가 해준다.
const rootReducer = combineReducers({ bucket});

//스토어를 만든다.
const store = createStore(rootReducer);

export default store;

5) 미들웨어

리덕스 미들웨어를 사용하면 액션이 디스패치 된 다음, 리듀서에서 해당 액션을 받아와서 업데이트 하기 전에 추가적인 작업을 할 수 있다.

추가적인 작업의 예

특정 조건에 따라 액션이 무시되게 만든다.
액션을 콘솔에 출력하거나, 서버쪽에 로깅할 수 있다.
액션이 디스패치 됐을때 이를 수정해서 리듀서에게 전달되게 한다.
특정 액션이 발생했을 때 이에 기반해 다른액션이 발생되게 할 수 있다.
특정 액션이 발생했을 떄 특정 자바스크립트 함수를 실행 시킬 수 있다.
** 보통 리덕스에서 미들웨어를 사용하는 주된 용도는 비동기 작업을 처리 할 때 입니다 예를들어 리액트 앱에서 우리가 만약 백앤드 API를 연동해야 된다면 리덕스 미들웨어를 사용하여 처리하곤한다.