state 관리 프레임워크 리덕스
리덕스는 스테이트 관리 프레임워크(state management framework).
리액트를 포함해 여러 웹테크에서 사용할 수 있다.
하나의 스테이트가 앱의 모든 스테이트를 책임진다.
예를들어 리액트 앱에 10개의 컴포넌트가 각각 로컬 스테이트를 가지고 있더라도,
모두 리덕스의 '스토어(store)'에 있는 하나의 스테이트에 정의된다(키포인트)
이 말은 앱을 업데이트 할 때 반드시 리덕스 스토어를 거쳐야 된다.
이런 일방통행 방식은 앱 관리를 편하게 해준다.
리덕스 스토어 만들기
스토어는 리듀서(reducer) 함수를 필수로 받는다.
밑의 예는 리듀서의 스테이트가 5를 가진다.
그리고 만들어진 리덕스의 스토어에 들어간다.
const reducer = (state = 5) => {
return state;
}
let store = Redux.createStore(reducer);
더 간단하게 만들 수 있다.(위 아래 같다)
const store = Redux.createStore(
(state = 5) => state
);
리덕스의 메소드들
리덕스의 몇 가지 메소드를 알아보자
스테이트의 값을 가져오는 getState()
const store = Redux.createStore(
(state = 5) => state
);
let currentState = store.getState();
//currentState 출력값: 5
액션을 보내는 dispatch()
store.dispatch(actionCreator());
store.dispatch({ type: 'LOGIN' });밑에서 크리에이터와 같이 더 자세히 설명
리덕스 액션은 메신저
앞서 말했듯이 리덕스는 스테이트 관리 프레임워크다,
그러므로 스테이트를 업데이트 하는일이 주요 업무이다.
그리고 이 스테이트 업데이트는 액션(action)에 의해 일어난다.
액션은 간단히 자바스크립트 오브젝트이다.
리덕스 스토어는 이 액션의 오브젝트를 받아서 스테이트를 업데이트한다.
액션은 데이터(선택사항), 타임(type) 프로퍼티(필수)를 가진다.
리덕스 액션은 앱안에서 일어나는 이벤트의 정보를 전달해주는 메신저라고 생각하자
액션의 예
let action = {
type: "LOGIN"
}
액션 크리에이터 + 디스패치 => 리덕스 스토어
액션을 만들었으면 스테이트를 업데이트하기 위해 보낸다.
이 보내는 역할을 하는게 액션 크리에이터(action creator)와 디스패치(dispatch) 메소드
크리에이터
간단히 말해 크리에이터는 '오브젝트를 리턴하는 자바스크립트 함수'
크리에이터의 예
const action = {
type: 'LOGIN'
}
function actionCreator() {
return action;
}
디스패치
크리에이터에서 리턴된 오브젝트를 리덕스 스토어에 넘기는 일을 한다.
크리에이터와 디스패치의 예
const store = Redux.createStore(
(state = {login: false}) => state
);
//크리에이터
function loginAction () {
return {
type: 'LOGIN'
}
};
//디스패치
store.dispatch(loginAction());
자! 리덕스 스토어가 액션을 반응할 차례
액션을 만들어서, 크리에이터가 오브젝트를 리턴해주고,
디스패치로 리덕스 스토어에 옮겼다. 이제는 리덕스 스토어가 반응할 차례
이 일을 앞에 나온 리듀서(reducer)가 해준다.
리듀서가 하는 유일한 일
리듀서는 다른일을 일체하지 않는다.
오직 스테이트와 액션을 받아서 '새로운' 스테이트를 리턴한다.
리덕스의 스테이트는 오직 읽기전용이다(키포인트)
이 말은 오로지 한 가지 일만 하는 이 리듀서라는 함수는,
기존의 스테이트를 변경하지 않고 항상 새로운 스테이트를 리턴한다.