리덕스 기본개념
- 리덕스는 JavaScript 상태관리 라이브러리 이다.
- 컴포넌트에 종속되지 않고 상태관리를 컴포넌트 바깥에서 한다.
- 프로젝트 루트레벨에서 store 라는 곳에 state를 저장하고, 모든 컴포넌트는 store 에 Subscribe(구독)을 하면서 state와 그 state를 바꾸는 함수를 전달받는다.
리덕스 흐름
Store
- store는 상태(state)가 관리되는 오직 하나의 공간이다.
- 컴포넌트와는 별개의 공간으로 상태를 필요한 형태로 담는다.
- 컴포넌트에서 상태 정보가 필요할때 접근한다.
- store은 function(함수) 로 생성 되어야 한다 data를 modify하는 reducer 나 modify 는 처음으로 data 를 바꿔준다.
- 하지만 뭐든지 return하는 것은 application에 있는 data counterModifier 가 “hello” 라고 return 한다면 application의 data가 된다.
Action
- redux에서 function을 부를 때 쓰는 두 번째 parameter 혹은 argument으로 reducer와 소통하기 위한 방법
- reducer와 소통하는 방법으로 Object여야 하며 그 key 이름은 항상 type임 (바꿀 수 없음)
- Action은 객체 형식으로 되어있다.
- Reducer에게 Action을 보내는 방법
store.dispatch({key: value});
Subscribe
store 안에 있는 변화 감지
subscribe 함수는, 함수 형태의 값을 파라미터로 받아온다.
subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출.
store.subscribe(func); // store안의 변화를 감지하면 func 실행Dispatch
- 디스패치는 스토어의 내장함수 중 하나이다. 디스패치는 액션을 발생 시키는 것
- dispatch 라는 함수에는 액션을 파라미터로 전달. dispatch(action) 이런식이다.
- 그렇게 호출을 하면, 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어준다.
Reducer
- 리듀서는 변화를 일으키는 함수, 리듀서는 두가지 파라미터를 받아온다.
function reducer(state, action) {
// 상태 업데이트 로직
return state;
}- 리듀서는, 현재의 상태와, 전달 받은 액션을 참고하여 새로운 상태를 만들어서 반환한다.
- 이 리듀서는 useReducer 를 사용할때 작성하는 리듀서와 똑같은 형태를 가지고 있습니다.
ex) reducer count
function counter(state, action) {
switch (action.type) {
case 'INCREASE':
return state + 1;
case 'DECREASE':
return state - 1;
default:
return state;
}
}리덕스를 사용 할 때에는 여러개의 리듀서를 만들고 이를 합쳐서 루트 리듀서 (Root Reducer)를 만들 수 있다.