리덕스란?
전역 상태관리를 하게 만들어주는 라이브러리
리액트에서만 사용하지 않음, 뷰 앵귤러 등등 다양한 곳에서 사용
왜 사용하는가?
컴포넌트가 많으면 많을수록 props로 전달해주는 값도 많고,
형제 컴포넌트에는 서로 state의 값을 변경해주기 힘들어서
리덕스의 상태관리 흐름
- (1) 리덕스 Store를 Component에 연결한다.
- (2) Component에서 상태 변화가 필요할 때 Action을 부른다.
- (3) Reducer를 통해서 새로운 상태 값을 만들고,
- (4) 새 상태값을 Store에 저장한다.
- (5) Component는 새로운 상태값을 받아온다. (props를 통해 받아오니까, 다시 랜더)
리덕스 개념과 용어
1) State - 리덕스에서 저장하고있는 상태값(데이터)
2) Action - 상태가 변화가 필요할때(가지고있는 데이터를 변경할 때) 사용
//액션은 객체
{type: 'CHANGE_STATE', data: {...}} 이런식으로 사용
앞에 type의 값은 사용자가 정하면 된다.3) ActionCreator - 액션 생성 함수, 액션을 만들어주기 위해 사용
4) Reducer - 리덕스에 저장된 상태(데이터)를 변경해주는 함수
액션 함수 호출 -> 액션 생성 -> 리듀서가 현재 상태(데이터)와 액션 객체를 받아옴
-> 새로운 데이터 만듦 -> 새로운 데이터 리턴
// 기본 상태값을 임의로 정해줬어요.
const initialState = {
name: 'mean0'
}
function reducer(state = initialState, action) {
switch(action.type){
// action의 타입마다 케이스문을 걸어주면,
// 액션에 따라서 새로운 값을 돌려줍니다!
case CHANGE_STATE:
return {name: 'mean1'};
default:
return false;
}
}5) Store - State를 관리하는 저장소
6) dispatch - Store의 내장함수 액션을 발생시키는 역할을 함
리덕스의 3가지 특징
- 한프로젝트에서 하나의 스토어만 사용한다
- store의 state는 오직 action으로만 변경할수있다.
- 이거는 내가 완벽히 이해X 노션에 써있는 설명은리액트에서도 state는 setState()나, useState() 훅을 써서만 변경 가능했죠!
데이터가 마구잡이로 변하지 않도록 불변성을 유지해주기 위함입니다.
불변성 뭐냐구요? 간단해요! 허락없이 데이터가 바뀌면 안된단 소리입니다!
조금 더 그럴 듯하게 말하면,리덕스에 저장된 데이터 = 상태 = state는 읽기 전용입니다.
그런데... 액션으로 변경을 일으킨다면서요? 리듀서에서 변한다고 했잖아요?
→ 네, 그것도 맞아요. 조금 더 정확히 해볼까요!가지고 있던 값을 수정하지 않고, 새로운 값을 만들어서 상태를 갈아끼웁니다!
즉, A에 +1을 할 때,
A = A+1이 되는 게 아니고, A' = A+1이라고 새로운 값을 만들고 A를 A'로 바꾸죠.
- 어떤 요청이 와도 리듀서는 같은 동작을 해야한다
-리듀서는 순수한 함수이다
순수한 함수라는 것은
- 파라미터 외의 값에 의존하지 않는다.
- 이전 상태는 수정하지(건들지)않는다. (변화를 준 새로운 객체를 return 해야한다)
- 파라미터가 같으면, 항상 같은 값을 반환해야한다.
- 리듀서는 이전 상태와 액션을 파라미터로 받는다.
