리덕스
1. Action - 상태에 어떠한 변화가 필요할때
{
type : "TOGGLE_VALUE",
}
type(필수), data(선택)
2. Action Creator (액션 생성함수)
export function addTodo(data) {
return {
type : "ADD_TODO",
data
};
}
3. 리듀서(Reducer) - 변화를 일으키는 함수
- state, action
switch(action.type){
case 'Up' ;
return state + 1;
default :
return state; // 디폴트에 리턴은 state;
// 만약 배열이나 객체면 스프레드 ...data로 새로운 배열을 만들어서 반영
4. 스토어 (store) - 현재 앱의 상태와 리듀서
- 디스패치 (dispatch) - 액션을 발생시키거나 전달한다.
dispatch({ type : 'Up' })
5. 구독 (subscribe) - store의 내장함수 - react-redux 사용 시
. 액션이 디스패치 될때마다 설정한 함수가 호출
. 스토어의 상태가 업데이트 될때마다 특정함수 호출
-------------------------------------------------------------------------------------
리덕스의 3가지 규칙!
1. 하나의 애플리케이션엔 하나의 스토어가 있습니다.
2. 상태는 읽기전용이다. - 불변성을 지켜줘야한다.
3. 변화를 일으키는 함수 리듀서는 순수한 함수여야한다.
- 동일한 인풋 -> 동일한 아웃풋
ex) new Date() , axios.get() 사용 X
-------------------------------------------------------------------------------------
import { createStore } from 'redux';
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){ // state 초기상태 설정
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);
console.log(store.getState());
const listener = () => {
const state = store.getState();
console.log(state);
};
const unsubscribe = store.subscribe(listener);
unsubscribe(); // 구독해제
store.dispatch(increase());
store.dispatch(decrease());
store.dispatch(changeText('안녕하세요'));
store.dispatch(addToList({ id :1, text : '와우' }));