티스토리 뷰
Redux란?
리덕스는 상태의 중앙관리를 위한 상태관리 도구입니다
전역상태를 생성하고 관리하기위한 라이브러리
Redux 왜 사용하나요?
리액트의 경우 단방향이라서 상태를 prpos로 전달받게 됩니다.
부모컴포넌트에서 최하위 자식 컴포넌트 전달한다고 했을때 두세개의 경우 가볍게 할 수 있지만 그 양이 일억개라고 생각해봅니다. 쉽게 말하자면 유선이라고 생각하면 됩니다. 리덕스의 경우 무선처럼 사용 할 수 있습니다
리덕스는 많아진 상태구성요소들을 보다 효율적으로 관리해줍니다
스토어를 사용하여 상태를 컴포넌트 구조 바깥에 두고 스토어를 통해 업데이트하거나 새로운 상태를 전달받아요
리덕스데브툴 사용시 시간여행 가능
그렇다면 리덕스 이전엔 어떻게 사용했나요?
Context API등을 사용
전역상태관리측면에서는 차이점이 없다고 봐도 무방
차이점은 ?
리덕스가 전역상태관리이외의 다양한 기능 제공 시간여행이라던지..
리덕스 사가, 리덕스 툴킷, 리덕스 데브툴 등 다양한 추가 라이브러리로 상태관리를 수월하게 할 수 있다 !
전반적인 흐름
store를 만들면 내부적으로 state값이 생기고 state값을 가져올때는 getState를 쓴다
Redux.createStore을 사용해 스토어 생성-> 자동으로 state가 생김
reducer라는 함수를 만들어 주입하여 state값 만들어준다 -> reducer에 state와 action을 넣어줘야한다.
기존state값이 undifined라면 초기화를 위해 최초로 실행되는 reducer의 호출
state 변경
액션을 만듦 디스패치에게 제줄 디스패치가 리듀서호출
리듀서가 기존 값과 액션을 참조해 새로운 상태 값 리턴
function reducer(state, action) {
if(state === undifiend) {
return {color:'red'}
}
}
const store = Redux.createStore(reducer);
const store = store.getStore()
<h1>${store.color}</h1>
store.dispatch({type:'CHANGE_COLOR' color:'red'});
리덕스 주요 개념
store
- 전역상태를 저장함
- store안은 리듀서를 통하지않고 접근 할 수 없다
- 컴포넌트 외부에 있는 상태 저장소
- 리덕스에서는 한애플리케이션당 하나의 스토어를 만든다
- 스토어 안에는 현재의 앱상태, 리듀서, 몇가지 내장함수가 들어가있음
reducer
- 이전상태와 동작을 받아 새 상태를 리턴하는 함수
또한 순수함수라고 부름
-> 순수함수란?
동일한 입력을 받았을 때 언제나 동일한 출력을 내는 함수
데이터베이스 호출이나 http호출등 외부의 데이터 구조를 변형하는 호출을 허용하지 않는 함수
action
상태의 변화가 필요할때, 이 액션은 하나의 객체로 표현됨
액션은 type이라는 필드를 필수적으로 가지고 있어야한다.
dispatch
- 액션을 발생시키는 역할
- 액션을 파라미터로 전달함 dispatch(action)
subscribe
- 스토어 내장함수
- 함수형태의 값을 파라미터로 받아옴
- subscribe함수에 특정 함수를 전달하면 액션이 디스패치되었을때마다 전달해준 함수 호출
할 일을 정의하는 Action
애플리케이션의 모든 데이터를 저장하는 State
Action과 State를 받아 새 상태를 리턴하는 Reducer