[220503] redux ) handleActions, createStore

handleActions

reducer를 좀 더 간단하게 만들 수 있음

import { handleActions } from 'redux-actions';
const CHANGE_USER = 'user/CHANGE_USER';

/*
const reducer = (state = initState, action) => {
	switch (action.type) {
    	case CHANGE_USER: return {
        	...state, user: action.user
        } 
    }
}
위 과정을 이렇게 줄여줌
*/

const reducer = handleActions({
	[CHANGE_USER]: (state, action) => ({
    	...state, user: action.user
    })
});

 

 

 

 

 

---

createStore로 reducer 생성하기

createStore은 앱에서 단 하나만 존재하는 저장소(객체)를 만들어낸다.

reducer를 객체로 받아 만든 저장소 store에서 자주 사용하는 속성은 세가지가 있다.

-  dispatch: [Function: dispatch]
-  subscribe: [Function: subscribe]
-  getState: [Function: getState]

const store = createStore(reducer)
// const [state,dispatch] = useReducer(reducer,initialState)
// a[0]=state, a[1]=dispatch
// 사용방볍이 틀릴뿐 거의 비슷한 코드

console.log(store)

 

 

 

createStore로 만든 저장소의 속성 : getState, dispatch, subscribe

getState : store 저장소 안에 있는 객체값을 리턴한다.

dispatch : 인자값으로 받은 함수를 계속 리턴해서 상태를 계속 바꾼다.

subscribe : 이벤트를 등록만! 한다. addEventListner과 비슷한 기능. 따로 호출을 받아야 실행된다.

console.log(store.getState())
// 출력값 { name: 'ingoo', coffee: 0 } -> 안에 있는 객체값을 리턴함

store.dispatch({type:'change_name'})// 상태를 바꾸는 함수
console.log(store.getState())
// 출력값 { name: 'ingoo2', coffee: 0 } -> 안에 있는 객체값을 리턴함

store.dispatch({type:'coffee_up'}) // coffee +1 만들기
store.dispatch({type:'coffee_up'})
console.log(store.getState())
// 출력값 { name: 'ingoo2', coffee: 2 } -> 안에 있는 객체값을 리턴함

// store.subscribe(log) // 코드 소실됨 찾아내기