action

저번에 store와 reducer의 의미를 배웠는데, store는 data를 저장하는 공간, reducer은 data를 수정하는 공간이다. 

여기서 data를 수정하려면 action을 통해서 가능하다. action은 reducer의 두번째 파라미터이고,

countStore.dispatch({type: "ADD"})

이런 식으로, store에 dispatch()를 붙여서 오브젝트형식을 action에 보낼 수 있다. type: "ADD" 를 먼저 보내보자.

이러면 reducer안에서 action은 type: "ADD"가 된다.

const countModifier = (count = 0, action) => {
    if (action.type === "ADD") {
        console.log('hello')
    }
    return count;
}

const countStore = createStore(countModifier);

countStore.dispatch({type: "ADD"})

그래서 위처럼, action.type가 ADD일 때, 콘솔을 찍어보면 잘 나오게 된다.

 

즉, dispatch로 한번 보낼 때, countModifier이 한번 작동하게 된다. 그리고 return 값은 항상 data가 된다.

const countModifier = (count = 0, action) => {
    if (action.type === "ADD") {
        return count + 1;
    } else if (action.type === "MINUS") {
        return count - 1;
    } else {
        return count;
    }
}

이렇게 count 에 +1 -1을 하게 해주고,

countStore.dispatch({type: "ADD"});
countStore.dispatch({type: "ADD"});
countStore.dispatch({type: "ADD"});
countStore.dispatch({type: "ADD"});
countStore.dispatch({type: "MINUS"});

5번 dispatch를 해주면 countStore.getState()의 값은 4가 나오게 된다.