참고
Redux(리덕스)란?
NOTE
리덕스란 JavaScript 상태관리 라이브러리다! (리액트 없어도 됨)
•
Redux(리덕스)의 본질은 Node.js 모듈이다.
•
상태관리 도구가 왜 필요한지는 다음의 짤과 영상을 보자
Redux없으면 화살표 수만큼 전달해줘야함..
자식의 자식의 자식… 의 state를 쉽게 관리해주기 위해서라는 의미 (props로 하면 영상처럼된다.)
Redux의 기본 개념 : 세 가지 원칙
NOTE
1. Single Source of truth
•
스토어라는 하나뿐인 데이터 공간이 있다는 의미!
•
동일한 데이터는 항상 같은 곳에서 가져온다.
2. State is read-only
•
리액트에서는 setState메소드를 통해서만 상태 변경이 가능했다!
•
리덕스에서도 Action이라는 객체를 통해서만 변경이 가능
3. Changes are made with pure function
•
변경은 순수함수로만 가능하다!
•
reducer와 연관되는 개념
•
Store - Action - Reducer
Store, Action, Reducer의 의미와 특징
NOTE
다음과 같은 구조로 이루어진다.
움짤버전도 있다
Action
NOTE
const counterReducer = (state = {counter: 0}, action) => {
if(action.type === 'increment'){
return{
counter: state.counter + 1
}
}
return state
}
const store = redux.createStore(counterReducer);
//..
store.dispatch({type: 'increment'});
store.dispatch({type: 'decrement'});
JavaScript
복사
•
Action의 type에 따라 변화를 일으키는 함수다.
•
Store에 상태값이 들어가기전 Action에서 전달된 type의 종류에 따라 어떤 상태값으로 Store에 반환되는지 정하는 방식이다.
•
Store를 만드는 함수인 createStore()의 1번째 파라미터에 들어가며, Reducer의 1번째 파라미터에 초기 상태값, 액션값을 넣어준다.
Reducer
NOTE
// Reducer 생성
const counterReducer = (state = {counter: 0}, action) => {
if(action.type === 'increment'){
return{
counter: state.counter + 1
}
}
return state
}
const store = redux.createStore(counterReducer);
JavaScript
복사
•
Action의 type에 따라 변화를 일으키는 함수다.
•
Store에 상태값이 들어가기전 Action에서 전달된 type의 종류에 따라 어떤 상태값으로 Store에 반환되는지 정하는 방식이다.
•
Store를 만드는 함수인 createStore()의 1번째 파라미터에 들어가며, Reducer의 1번째 파라미터에 초기 상태값, 액션값을 넣어준다.
Action
•
Dispatch의 파라미터로 전달되는 데이터다.
•
Action은 상태값이 어떻게 변할지 행동을 적어놓는 객체이며, type에 따라 다른작업을한다.
Store
NOTE
// Store 생성
const store = redux.createStore(counterReducer);
// 리스너 함수
const counterSubscriber = () => {
const latestState = store.getState();
console.log(latestState);
}
// store 구독(상태 업데이트마다 실행)
store.subscribe(counterSubscriber);
JavaScript
복사
•
리덕스에서 가장 중요한 객체이다.
•
현재 상태를 가지고 있고, Action을 받은 Dispatch함수가 Reducer로 전달한 상태값을 여기에 저장한다.
•
subscribe으로 상태가 업데이트 될 때 마다 실행한다.
•
리듀서 1번째 파라미터에는 최초의 상태값이 무조건 정의되어야 한다!subscribe
•
Store의 내장 함수 중 하나이다.
•
subscribe함수안에 listener함수를 파라미터로 넣어서 호출한다.
•
Store의 데이터가 변할때마다 실행되는 메서드이다.
dispatch
store.dispatch({type: 'increment'});
store.dispatch({type: 'decrement'});
JavaScript
복사
•
Store의 메서드이고 상태값 업데이트를 실행하는 함수이다.
•
dispatch가 실행되면 파라미터로 전달받은 Action이 Reducer의 2번째 파라미터로 전달된다. → 그리고 Reducer 안에있는 코드들로 인해 Store에 값이 저장된다.