[React] Redux

리덕스 : 리엑트에서 가장 많이 사용되는 상태 관리 라이브러리, 한방향 구조!!!

- 컴포넌트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리

 

 

리덕스 기본 용어

1) 액션 : 상태에 변화가 필요하다면 액션을 일으킨다. 

 

{
   type: 'ADD_TODO', // 반드시 가지고 있어야한다.
   data: {
       id: 1,
       text: '리덕스 배우기'
   }
}

 

 

2) 액션 생성함수 : 액션 객체를 만들어주는 함수

 

function addTodo(data) {
 return {
   type: 'ADD_TODO',
   data,
 }
}

 

 

3) 리듀서 : 현재 상태와 액션 객체를 받아 필요하다면 새로운 상태를 리턴하는 함수 ( 이벤트 리스너라고 생각 )

 

const initialState = {
 counter: 1,
}
function reducer(state = initialState, action) {
 switch (action.type) {
   case INCREMENT:
     return {
       counter: state.counter + 1,
     }
   default:
     return state
 }
}

 

 

4) 스토어 : 상태

 

5) 디스패치 : 액션 객체를 넘겨줘서 상태를 업데이트 하는 유일한 방법, 이벤트 트리거 

 

6) 구독 : 리스너 함수를 파라미터로 넣어 호출하면 상태가 업데이트될 때마다 호출 

 

7) 셀렉터 : react-redux에서는 상태 값을 가져올 때 사용한다. 

 

 

리덕스 상태 변화의 흐름

 

 

1) Single Source of truth

: 하나의 애플리케이션 안에는 하나의 스토어만 사용한다.

 

2) State is read-only

: 상태를 변화시키는 방법은 오직 액션을 일으키는 것이다.

 

3) Changes are made with pure functions 

: 변화를 일으키는 리듀서 함수는 순수한 함수여야 한다. 

 

 

 

리엑트에서 리덕스 사용법

 

필요한 패키지

- redux

- react-redux

 

선택 패키지 

- redux-actions

- immer 

 

 

 

 

출처

 

https://kyun2da.dev/%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC/Redux-%EC%A0%95%EB%A6%AC/#%EB%A6%AC%EB%8D%95%EC%8A%A4-%EC%83%81%ED%83%9C-%EB%B3%80%ED%99%94%EC%9D%98-%ED%9D%90%EB%A6%84

Redux 정리