[TIL] 엘리스 SW 엔지니어 트랙 Day 060

📖 오늘 배운 내용 - 2022.01.14

• Redux
• React Redux
• redux-toolkit

 

📝 Redux 데이터 흐름

[Redux] 리덕스 데이터 흐름

 

📝 Redux 소개

[Redux] 리덕스란?

 

📝 Redux의 구조

[Redux] Redux의 구조

 

📝 redux-toolkit 활용

[Redux] redux-toolkit

 

📝 React Redux

[React Redux] React Redux란?

 

📝 Redux를 이용한 비동기 처리

• redux 비동기 처리를 위해서는 비동기를 위한 middleware를 추가하여야 한다.
• redux-thunk는 Promise를 이용한 비동기 Action을 쉽게 처리하도록 하는 middleware다.

 

📕 createAsyncThunk

• redux-toolkit에서는 thunk middleware를 디폴트로 추가
• redux-toolkit은 createAsyncThunk API를 제공
  • 함수를 리턴하는 함수
• fulfilled, rejected, pending 3가지 상태에 대해 각각 reducer를 작성
• TypeScript 환경에서 reducer 작성 시, builder callback을 사용하여 작성해야 정확한 타이핑이 가능하다.
• dispatch 함수는 Promise를 반환하며, 반환된 Promise를 토대로, 복합적인 비동기 처리를 할 수 있다.

 

const addPost = createAsyncThunk('posts/addPost',
    async (title) => {
        const result = await PostAPI.addPost({     title })
        return result.data
    }
)

// Component
useEffect(() => {
    dispatch(addPost("post 1"))
}, [])

• createAsyncThunk는 두 인자 action type, async callback(payload creator)를 받는다.
• action type을 주어지면 pending, fulfilled, rejected가 각각 postfix로 붙어 reducer로 들어온다.
  • ex) posts/addPost/pending

 

const addPost = createAsyncThunk('posts/addPost',
    async (title) => {
        const result = await PostAPI.addPost({ title })
        return result.data
    }
)

• createAsyncThunk로 만들어진 action creator는 4가지 함수로 구성된다.
• addPost : async 함수를 dispatch 하는 함수
  • addPost.pending : promise를 생성했을 때 발생하는 액션
  • addPost.fulfilled : promise가 fulfilled 되었을 때 발생하는 액션
  • addPost.rejected : promise가 rejected 되었을 때 발생하는 액션

 

const postsSlice = createSlice({
    // ...
    extraReducers: builder => { builder
        .addCase(addPost.pending, state => ...)
        .addCase(addPost.fulfilled, state => ...)
        .addCase(addPost.rejected, state => ...)
        }
})

• createSlice의 extraReducers 함수를 이용해, builder에 각 상황에 대한 리듀서를 추가할 수 있다.
• 공식적으로 builder pattern을 추천하는데, 타입스크립트에서 타이핑이 용이하기 때문이다.

 

const postsSlice = createSlice({
    // ...
    extraReducers: builder => { builder
        .addCase(addPost.pending, state => ...)
        .addCase(addPost.fulfilled, state => ...)
        .addCase(addPost.rejected, state => ...)
    }
})

• fulfilled시 데이터는 payload로 들어온다.
  • ex) action.payload.todos
• rejected시 에러는 action.error로 들어오며, payload는 undefined가 된다.

 

📕 연속적인 비동기 처리

dispatch(addPost("post1"))
    .then(() => 

dispatch(updatePost("post2")))

• thunk 함수를 dispatch 하면 promise가 리턴된다.
• 따라서, .then() 메서드로 연속적인 비동기 처리를 이어 실행할 수 있다.

 

📕 동시 비동기 처리

Promise.all([
    dispatch(addPost("post1")),
    dispatch(updatePost("post2"))
])
    .then(() => 
        console.log("DONE"))

• Promise.all을 이용해 여러 비동기 처리를 동시에 실행한다.
• 주의할 점은 thunk의 promise가 rejected 되어도 .then()으로 들어온다는 것이다.

 

💡 오늘 깨달은 것

• 이고잉 코치님과 함께한 리덕스는 할만했는데, 온라인 강의에서 배운 리덕스는 너무 어렵다.
• 그래도 리덕스를 통해 상태 관리를 한곳에서 하니까 가독성이 높아지는 거 같다. 또한 불필요한 코드가 줄어든다. 근데 어렵다!!!!