redux의 상태관리와 reducer.

위 포스트에서 redux로 state를 만드는 법에대해 알아보았다.

 

그러면 이 포스트에서는

 

redux state에 변화를 주는 법을 알아본다.

 

해당 state에 변화를 주는 로직을 reducer라고하는데,

 

일종의 함수이다.

위와 아래 사진을 비교하자.

 

결론은 reducer가 있고 없고의 차이인데,

 

위 사진은 createStore가 단순히 어떤 변수를 그대로 return해 props로 전송할 store 변수를 만들어낸다. 

 

즉, 로직이 없다는 이야기이다.

 

 

반면 아래 사진은 무언가 reducer라는 로직을 거친다.

 

reducer는 인자를 두 개 받는데, 첫 인자는 default parameter 문법을 사용해서,

 

관리할 데이터하고 가공할 데이터가 defaultStock 변수임을 확실히한다.

 

그리고 두 번째 데이터는 action인데, 이는 컴포넌트에서 이벤트로 state의 값 변화를 요청하는 로직이다.

 

 

따라서 action에 어떤 요청이 들어오느냐에 따라

 

if 문에서 처리할 로직이 선택되고,

 

로직을 처리하고 바뀐 state 값을 return 하여 실질적으로 바뀐 redux state 값이 우리의 눈에 보이게한다. 

 

 

그렇게 정의하고 선언한 reducer라는 함수를

 

다시 createStore 함수의 인자로 넣어 store 변수에 할당하고

 

Provider의 props로 집어넣어 다른 컴포넌트에서 받아 쓸 수 있게한다.

 

 

그럼 컴포넌트에서는 어떻게 reducer의 action에 요청을 할까.

 

바로 이벤트에 props.dispatch 라는 함수를 콜백 함수로 넣어 사용한다.

 

근데 dispatch 함수에는 객체를 또 인자로 넣는데,

 

그 객체에 프로퍼티로 type이라는 key 값과 value에 action에 요청할 요청 이름을 String으로 넣는다.

 

 

저 type의 value가 바로 reducer에서 if 문으로 실행되는 state 변수 변환 로직 이름이다.

 

따라서 알맞게 원하는 type을 이벤트의 콜백 함수로 넣어주면

 

reducer에서 원하는 로직을 처리하게 할 수 있다.

 

 

 

reducer에 데이터를 전송하는것 역시 가능하다.

type과 함께 하나의 객체 안에서 프로퍼티로 전송하는데

 

관습적으로 payload라는 이름을 사용하며

 

value로 또 객체를 싣어준다.

 

그 객체 안에 reducer로 보내고자 하는 데이터를 객체 형식 key, value로 담아 보낸다.

 

 

그러면 reducer에서 역시

 

이렇게 객체 형식으로 출력이 가능하다.

 

그리고 받은 데이터로 로직을 쭉쭉 작성해주면된다.

 

 

마지막으로 우리가 dispatch 함수로 보낸 객체 형식의 데이터 type과 payload들이

 

결과적으로 reducer에서 action이라는 변수로 받아지므로

 

이것들을 action parameter라고 부른다.