리덕스의 기본적인 기능을 연습해보기 위해 먼저 프로젝트를 만든 후 리덕스를 설치했다.
$ yarn add redux
사용하기 위해 기본적인 상태를 가지고 있는 객체를 만들어주고, 각 액션과 액션 생성함수를 만들어준다.
그 후 리듀서 함수를 만들어주는데 이때 파라미터로 들어가는 state에 기본값을 넣어줘야 하는데, 리덕스에서 초기 상태를 만들때 리듀서를 한번 호출하는데 그 시점에 state 가 undefind 상태면 return undefind 가 되면서 초기 상태가 만들어지지 않는다.
createStore 함수 안에 작성한 리듀서를 넣어 스토어를 만들어주면 된다.
구독을 위해서는 subcribe() 함수를 사용하면 되는데 구독을 취소하기 위해서는 subcribe() 를 담은 값을 호출해주면 된다.
import { createStore } from "redux";
//createStore 스토어를 만들기 위한 함수
//기본상태
const initialState = {
counter: 0,
text: "",
list: [],
};
//액션타입
const INCREASE = "INCREASE";
const DECREASE = "DECREASE";
const CHANGE_TEXT = "CHANGE_TEXT";
const ADD_TO_LIST = "ADD_TO_LIST";
//액션 생성 함수, 보통 화살표 함수로 생성
//액션 객체를 만들어 반환하면 된다.
//액션 타입은 대문자로 작성, 함수는 소문자로 작성
const increase = () => ({
type: INCREASE,
});
const decrease = () => ({
type: DECREASE,
});
const changeText = (text) => ({
type: CHANGE_TEXT,
text,
});
const addToList = (item) => ({
type: ADD_TO_LIST,
item,
});
//리듀서
//스테이트에 기본값 넣어줘야됨
function reducer(state = initialState, action) {
switch (action.type) {
case INCREASE: {
return {
...state,
counter: state.counter + 1,
};
}
case DECREASE: {
return {
...state,
counter: state.counter - 1,
};
}
case CHANGE_TEXT: {
return {
...state,
text: action.text,
};
}
case ADD_TO_LIST: {
return {
...state,
list: state.list.concat(action.item),
};
}
default:
return state;
}
}
const store = createStore(reducer);
const listener = () => {
//state의 상태를 조회하는 함수 (getState())
const state = store.getState();
console.log(state);
};
//구독
const unsubscribe = store.subscribe(listener);
//구독 취소 unsubscribe(); 호출
//디스패치
store.dispatch(increase());
// {counter: 1, text: "", list: Array(0)}
store.dispatch(decrease());
// {counter: 0, text: "", list: Array(0)}
store.dispatch(changeText("체인지"));
// {counter: 0, text: "체인지", list: Array(0)}
store.dispatch(addToList({ id: 1, text: "블라블라" }));
// {counter: 0, text: "체인지", list: Array(1)}
// counter: 0
// list: Array(1)
// 0: {id: 1, text: "블라블라"}
// length: 1
// __proto__: Array(0)
// text: "체인지"
// __proto__: Object
스토어에 액션을 디스패치 -> 리듀서 호출 -> 상태업데이트 -> 구독
과 같은 상태로 진행된다.
리덕스를 조금 더 편하게 사용하기 위해 리덕스 개발자 도구를 사용하면 편한데 현재 스토어 상태 조회, 지금까지 디스패치된 액션 확인, 그리고 액션에 따른 상태변화 등을 확인할 수 있다.
크롬에서 redux devtools 확장프로그램을 설치하고 프로젝트에서
yarn add redux-devtools-extension
을 해주면 설치가 완료된다.
그 후 index.js 에서 composeWithDevTools 를 불러온 후 store 를 만들 때 두번째 파라미터로 보내주면 된다.
//index.js
import { composeWithDevTools } from "redux-devtools-extension";
const store = createStore(rootReducer, composeWithDevTools());