Redux

개요

Redux는 어렵게 생각할 필요 없이, 3단계로 이루어져있다.

	설 명
Action	상태 변경을 일으키는 이벤트에 대한 정적인 정보로서, 대부분 객체 형식으로 이루어져있다.
Reducer	Action을 받아, 어떻게 수행할지를 정하는 함수
Store	State를 관리하는 장소

 

예제로 살펴보기

아래는 간단하게 JS에서 테스트해본 것이다.

// 테스트에서는 CDN으로 불러오는 방식을 사용했다.
// <script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
const Redux = require('redux');

// 리듀서
const myReducer = (state = 0, action) => {
    switch(action.type) {
        case 'add_number':
            return state + 1;
        case 'minus_number':
            return state - 1;
    }
}

// store 만들구 리듀서 등록
const store = Redux.createStore(myReducer);

// 바꿔주세요 (Store에 넣을래요)
store.dispatch({
    type: 'add_number',
});


// for test
console.log(store.getState()); // 1
store.dispatch({
    type: 'minus_number',
})
console.log(store.getState()); // 0