Beomlog - Redux, Redux-saga - post

post의 상태관리는 redux와 redux-saga를 통해서 하려고 한다. 일단 가장 기본적인 리덕스 액션들은 다음과 같이 짰다.

 

const UPLOAD_POST = 'post/UPLOAD_POST';
const UPLOAD_POST_SUCCESS = 'post/UPLOAD_POST_SUCCESS';
const UPLOAD_POST_ERROR = 'post/UPLOAD_POST_ERROR';

const GET_POST = 'post/GET_POST';
const GET_POST_SUCCESS = 'post/GET_POST_SUCCESS';
const GET_POST_ERROR = 'post/GET_POST_ERROR';

const DELETE_POST = 'post/DELETE_POST';
const DELETE_POST_SUCCESS = 'post/DELETE_POST_SUCCESS';
const DELETE_POST_ERROR = 'post/DELETE_POST_ERROR';

const UPDATE_POST = 'post/UPDATE_POST';
const UPDATE_POST_SUCCESS = 'post/UPDATE_POST_SUCCESS';
const UPDATE_POST_ERROR = 'post/UPDATE_POST_ERROR';

export const uploadPost = (
    title: string,
    editorData: string,
    category: string,
    userData: UserData,
    time: any,
    uid: string,
    postId: string
) => ({
    type: UPLOAD_POST,
    payload: {
        title,
        editorData,
        category,
        userData,
        time,
        uid,
        postId
    },
    meta: postId
});
export const getPost = (postId: string) => ({
    type: GET_POST,
    payload: postId,
    meta: postId
});
export const deletePost = (postId: string) => ({
    type: DELETE_POST,
    payload: postId,
    meta: postId
});
export const updatePost = (
    title: string,
    editorData: string,
    category: string,
    time: any,
    postId: string,
    ver: number
) => ({
    type: UPLOAD_POST,
    payload: {
        title,
        editorData,
        category,
        time,
        postId,
        ver
    },
    meta: postId
});

const actions = { uploadPost, getPost, deletePost, updatePost };

 

그리고 Post 타입과 State는 다음과 같이 지정했다.

 

파이어베이스를 통해서 게시물들 관리를 할 것이기 때문에 살짝 복잡해졌다. 이제 각각의 성공과 실패를 알릴 SUCCESS 와 ERROR로직은 아래와 같이 짰다.

그럼 이제 각 사가는 다음과 같이 관리할 수 있다.

$$$$ 표시가 있는 곳에는 이제 promiseCreator가 들어갈 자리이다. 아직 api에서 해당 기능을 구현하지 않았으니 만들어 지는대로 넣어주면 될것 같다. 이제 사가에서 성공 메세지가 날라오면 action의 payload에 해당 데이터를 넣어줄 것이다. 일단 가장 기본적인 GET_POST의 리듀서를 다음과 같이 작성해 주었다.

GET_POST_SUCCESS에서는 action의 payload로 post에 관련된 정보들을 받아올 것이기 때문에 action.payload를 state에 스프레드 시켜주고, 에러를 널로 지정한다. 반면 에러가 났다면, state를 초기화 시켜야하기 때문에 initialState로 state를 초기화 시켜주고, error에 action의 payload로 넘어온 에러 정보를 넣어준다.

 

api를 먼저 만들어주자. api/firebase.ts에 post들의 api 호출 관련 메서드를 정리해준다. 다음과 같이 정리해주자.

대강 이런식으로 api로직을 정리해놨다. 이제 이것들을 사가와 연결시키기만 하면된다.

아까 달러표시로 넣어놨던 사가들을 이렇게 연결해 주었다. 이제 남은건 실제 구동하는지 테스트를 해보야한다. 하지만 아직 데이터베이스에는 아무 데이터도 없다. 따라서 데이터베이스에 더미 게시물을 하나 올려주자.

이제 이 로직들을 테스트 할것이다.