[React: code] 리덕스는 어떻게 사용할까?

이 글의 목적은 제가 작성한  코드를 다시 되집어 보는데 있습니다.

---

프로젝트를 진행하면서 리액트의 리덕스를 어떠한 순서로

사용하여 CRUD를 구현하였는지 다시 보고 정리하는 글입니다.

 

사용한 주요 패키지는 아래와 같고, firebase를 사용했습니다.

- react-redux

- redux-action

- redux-thunk

- immer 

 

먼저, 리덕스를 살펴보면,

 

 

스토어 - 데이터가 저장되는 곳

구독 - 스토어에서 컴포넌트로 데이터를 보내는 행위

리듀서 - 저장된 데이터(상태)를 관리하는 곳

액션 - 컴포넌트에서 데이터를 변경하여 스토어에 전송하고 싶을 때 선언하는 객체

디스패치 - 스토어의 내장 함수 중 하나로 액션 객체를 넘겨줘 상태를 업데이트하는 것

 

리덕스의 흐름

1) 리덕스 스토어를 컴포넌트가 구독하여 값을 받습니다.

2) 컴포넌트에서 상태를 변경위해 액션을 선언합니다

3) 리듀서를 통해서 상태 값을 변경합니다.

4) 변경된 상태 값을 스토어에 저장합니다.

5) 컴포넌트는 변경된 상태 값을 다시 받아옵니다.

 

미들웨어

이제, 리덕스의 흐름을 알아봤으니 미들웨어에 대해서 간단하게 정리하겠습니다.

미들웨어는 액션을 디스패치했을 때 리듀서에서

이를 처리하기에 앞서 사전에 지정된 작업을 실행할 수 있게 해줍니다.

 

프로젝트에서는 redux-thunk를 사용했습니다.

 

 

이제 코드에서 어떤 순서로 사용되는지 보겠습니다.

 

1) 컴포넌트에서 디스패치로 액션을 일으킵니다.

위 코드를 보면 useSelector로 스토어의 상태 값을 조회하고 있습니다.

아래 useEffect 안을 보면 dispatch(postActions.getPostFB())가 있는데,

위에서 설명한 디스패치로 액션을 일으키고 getPostFB라는 미들웨어를 실행시키는 것을 볼 수 있습니다.

 

2) 미들웨어

이 미들웨어는 firebase에 저장된 post 데이터들을 가져와 action creator로 데이터를 보내줍니다.

 

3) action & action creator

action이후 리듀서에서 값을 변경 시킵니다.

 

4) 리듀서

리듀서에서는 immer를 사용하여, 배열이나 객체를 업데이트 해야 할 때에 불변성을 지켜주었습니다.

 

위에서 코드로 설명한 것이 어떠한 코드인지 정확히 설명하지 않아 이해하기 힘드시겠지만,

어떠한 흐름으로 리듀서가 작성되는지 파악하시면 좋을 것 같습니다.