Redux(ducks) reducer파일 만들기

Reducer파일 만들기 

ducks패턴을 사용하여 redux사용해보기 

리덕스에서 saga thunk ducks등 다양한 패턴을 적용할 수 있다. 다 각각의 단장점 들이 있어서 상황에 맞게 사용하면 될것 같습니다. 오늘은 ducks 패턴을 사용해보겠습니다. 

ducks는 이전에 일일히 액션과, reducer, 기능들을 다양한 폴더에 나누어서 사용하게 되어있었다. 그래서 하나의 기능을 수정할 때 다양한 파일에 들어가 수정해야한 다는 단점이 있었습니다. 이러한 문제점을 해결하기 위해 ducks구조가 나온 것입니다. 

덕스 구조는 

1. 필요한 것들을 불러오기
   
   
2. 액션을 정의
   
   
3. 액션 크리에이터 정의
   
   
4. 리듀서 정의
   
   
5. 리듀서 함수 만들기
   
   
6. Export action Created
   
   
7. Export reducer

아래와 같은 형태로 되어있고

ducks구조에 약속이 있는데 

1. action creator를 export해줍니다. 

2. reducer를 export default해줍니다. 

3. reducer에서 action에 타입을 지정하여 이런 타입을 거쳐서 실행을 한다. 

이러한 규칙을 지켜서 reducer를 만들어 보겠습니다. 이전에 타이머 어플을 만들면서 사용한 것을 예시로 들어보겠습니다. 

Actions 정의 

일반적으로 Upper Snake형태로 만들어줍니다. 액션들을 명시해놓은 다음 Action Creator들을 만들어 보겠습니다. 

Action Creator 

Action들을 만드는 함수들을 위와 같이 만들어줍니다. return 형태는 json형태로 타입을 반환해줍니다. 

reducer

리듀서에 state는 초기에 만든 것을 initial형태로 전달해주고 action은 위에 정의 해놓은 것들을 사용합니다.

Reducer Functions 

reducer에 등록해놓은 함수들이다. 여기서 리턴 해주는 값에 맞게 State의 값이 변하게 됩니다. 

exports reducer, actionCreators

이러한 방법으로 리듀서를 만들어 주면 됩니다. 다음에는 자식 컴포넌트와 redux의 state, actions들을 연결시키는 방법을 알아보도록하겠습니다./