React - Redux 4

리덕스에서는 state를 reducer 함수에 저장하고 그것에 대한 수정방법을 같이 저장해놓은 다음 state 수정 동작을 하는 곳에서 dispatch()를 이용해서 state를 수정했었습니다. 그런데 dispatch는 또 다른 기능을 할 수가 있습니다. 바로 dispatch 할 때 데이터를 전송하는 것입니다. 이에 대해 공부해보겠습니다.

 

 

1️⃣ dispatch 이용해서 데이터를 보내는 법

 

 

dispatch는 보통 이렇게 사용했습니다.

 

props.dispatch({type: '추가'})

 

그런데 이 기능에다가 추가해서 데이터를 보내는 방법은 무엇일까요? dispatch를 이용하여 데이터를 보내기 위해서는 다음과 같이 하면 됩니다. 

 

props.dispatch({type: '추가', payload: {name: 'kim'})

 

type 뒤에다 payload: { } 이렇게 써주고 중괄호 안에 보내주고 싶은 데이터를 적어주면 됩니다. payload 부분은 이름은 자유롭게 해도 상관없지만 보통 payload라고 합니다.

 

 

 

2️⃣  payload로 보낸 데이터 사용하기

 

 

payload로 보낸 데이터를 사용하는 법에 대해서 알아보겠습니다. payload를 사용하기 위해서는 reducer 함수 안에서 사용해야 합니다. reducer 함수 안에서 보낸 데이터가 들어가야 하는 자리에 action.payload를 적어주면 됩니다. 여기서 action은 reducer 함수를 만들 때 넣은 두 번째 파라미터입니다. dispatch에 관련된 것들은 모두 action 파라미터에 들어간다고 생각하면 되겠습니다.