개요
redux는 store에서 상태를 관리하며, store는 단일 store이다.
action
1. action
- action은 객체이며, store의 상태를 변경하는 용도로 사용한다.
- type은 필수 프로퍼티이며 문자열이다.
- {type: 'test'} payload가 없는 액션
- {type: 'test', params: 'hello'} payload가 있는 액션
2. action creator
- function 액션생성자이름(...args) { return 액션; }
- action을 생성하는 함수를 액션 생성자라고 한다.
- 함수를 통해 액션을 생성한 후 액션 객체를 리턴한다.
3. action이 하는 일
- 액션 생성자를 통해 액션을 만든다.
- 만들어낸 액션 객체를 리덕스 스토어로 보낸다.
- 리덕스 스토어가 액션 객체를 받으면 스토어의 상태 값이 변경 된다.
- 변경된 상태 값에 의해 상태를 이용하고 있는 컴포넌트가 변경된다.
- 액션은 스토어에 보내는 일종의 인풋이다.
4. action을 설정하기 위한 두 단계
- 액션의 타입을 정의하여 변수로 설정하는 단계
- 대문자 상수 사용 - 액션 객체를 만들어내는 함수를 만드는 단계
- 하나의 액션 객체를 만들기 위해 하나의 함수를 사용한다.
reducer
1. reducer
- reducer는 액션을 전달하면 전달한 액션이 적용되어 달라진(or 달라지지 않은) 결과를 만들어 준다.
- reducer는 함수이다.(pure function)
- reducer는 immnutable 해야한다.
- reducer를 통해 state가 달라졌음을 redux가 인지하는 방식이다.
2. reducer 구조
- function 리듀서이름(prevState, action) { return newState; }
- action을 받아서 state를 return하는 구조이다.
- parameter로 들어오는 prevState(이전 값)와 return 되는 newState(새로운 값)는 다른 참조를 가지도록 해야한다(각각 immutable 해야한다).
store
1. store
- createStore(reducer)는 store를 만드는 함수다.
- store 안에는 dispatch, getState, replaceReducer, subscribe의 등의 함수가 들어있다.
// store 생성
const store = createStore(reducer);
// 현재 store의 state를 가져오는 함수
store.getState()
// 액션을 parameter로 넣어서 store의 상태를 변경시키는 함수
store.dispatch();
store.dispatch(액선생성자());
// store에 변경이 생겼을 때 함수를 실행하는 함수
// unsubscribe가 return된다.
store.subscribe(() => {});2. subscribe
- store의 변경사항이 생기는 것을 구독한다.
- store의 상태가 변경 되면 함수가 호출된다.
- 구독을 취소하는 함수가 return된다.
const unsubscribe = store.subscribe(() => {
console.log(store.getState());
});
// unsubscribe 함수 후부터는 console에 store 안에 있는 state가 출력되지 않는다.
unsubscribe();
combineReducers
1. combineReducers
- combineReducers는 reducer들을 합칠 때 사용하는 함수이며, 객체가 들어가고, 객체 안에 reducer들이 들어간다.
const reducer = combineReducers({
reducer,
reducer
});
export default reducer;
redux를 react에 연결하는 방법
1. react-redux를 사용하지 않고 연결
- store를 만들고, subscribe와 getState를 이용하여 변경되는 state 데이터를 얻고, 얻은 state를 props로 계속해서 아래로 전달하면 된다.
2. react-redux를 사용하여 연결
- provider를 제공해준다.
- connect 함수를 통해 컨테이너를 만들어준다.
- 컨테이너는 store의 state와 dispatch(액션)를 연결한 컴포넌트에 props로 넣어주는 역할을 한다. - 어떤 state를 어떤 props에 연결할 것인지 정의
- 어떤 dispatch(액션)를 어떤 props에 연결할 것인지 정의
- 그 props를 보낼 컴포넌트를 정의
반응형
댓글