firestore와 redux 연결하기

firestore는 firebase에서 제공하는 DataBase 서비스를 말한다. MongoDB와 같은 NoSQL DB이며, 구글계정만 있으면 무료로 이용할 수 있다.

Redux에 있는 state들을 DB에 저장하고 연동하기 위해선, 비동기처리가 필요하다. 우리가 직접 DB에 접근해 처리하는 것이 아니라, DB 서버에 작업을 요청해야하기 때문이다. 따라서 action을 dispatch하기 전에, DB에 작업요청을 먼저 진행해야한다.

redux-thunk

redux의 action creator는 객체형태의 action을 반환한다. 하지만 redux-thunk를 통해 새롭게 만든 action creator는 함수 형태의 action을 반환한다. 이렇게 함수형 action을 만드는 creator를 thunk라고 부른다.

thunk의 구조는 다음과 같다.

export const addWordDB = (word) => (dispatch, getState) => {
  ...
}

Arrow function이 2번 겹쳐진 걸로 보아, 함수를 return하고 있음을 알 수 있다. return하는 함수의 인자로 dispatch, getState가 주어진다. dispatch는 redux에서 사용하는 그 dispatch고, getState는 현재 state를 불러오는 함수다.

component에서는 기존에 쓰던 action creator 대신 thunk를 사용하면 된다. 그리고 thunk 안에서는 DB에 작업 요청을 시도하고, 완료 후 redux에 update하는 과정이 들어가면 된다.

추가로 reducer 부분에 약간의 수정이 필요할 수 있다.