1. 비동기 로직 다루기: createAsyncThunk #import { createAsyncThunk } from '@reduxjs/toolkit';export const fetchSearchResults = createAsyncThunk( 'search/setResults', async (payload, thunkAPI) => { /* 비동기 로직 */ });createAsyncThunk()는 type, payloadCreator 두 개의 argument를 받음. ① type: 비동기 Action을 만드는 데 사용할 문자열로, Slice Reducer의 이름 A, Reducer의 이름으로 사용할 B에 대해 "A/B" 형태의 문자열로 작성해주면 됨. 이때, B는 Slice Re..
import thunkMiddleware from 'redux-thunk' const middlewareEnhancer = applyMiddleware(thunkMiddleware); export default const store = createStore(rootReducer, middlewareEnhancer); Thunk 미들웨어(thunkMiddleware)는 위와 같이 Redux Store에 마운트할 수 있는데, 그 첫 과정으로 thunkMiddleware는 아래와 같은 함수에서 반환됨. 1. redux-thunk에서의 thunkMiddleware # // 'redux-thunk' index.js function createThunkMiddleware(extraArgument) { const m..
1. Thunk Middleware 앞서 Reducer는 Side-effect가 없는 순수함수여야 함을 알았음. 하지만, 네트워크 통신, 데이터 내보내기, setTimeout()와 같은 타이머 등 Side-effect가 없는 애플리케이션은 존재하지 않기 때문에 Redux에서 Side-effect를 다룰 수 있는 방법이 필요함. 이러한 Side-effect를 처리하기 위해 disptach()가 Store에 작업을 전달하기 전에 특수한 일을 할 수 있도록 disptach를 커스텀하는 함수인 Middleware라는 개념이 도입됨. Middleware는 UI 컴포넌트와 Store의 연결 다리 역할을 하기 때문에 Middleware에는 일반 객체가 아닌 값(ex. Promise)이 전달될 수 있고(순수함수일 필요..
JavaScript/Redux 2022. 9. 1. 22:44
1. 비동기 로직 다루기: createAsyncThunk #import { createAsyncThunk } from '@reduxjs/toolkit';export const fetchSearchResults = createAsyncThunk( 'search/setResults', async (payload, thunkAPI) => { /* 비동기 로직 */ });createAsyncThunk()는 type, payloadCreator 두 개의 argument를 받음. ① type: 비동기 Action을 만드는 데 사용할 문자열로, Slice Reducer의 이름 A, Reducer의 이름으로 사용할 B에 대해 "A/B" 형태의 문자열로 작성해주면 됨. 이때, B는 Slice Re..
JavaScript/Redux 2022. 8. 20. 20:13
import thunkMiddleware from 'redux-thunk' const middlewareEnhancer = applyMiddleware(thunkMiddleware); export default const store = createStore(rootReducer, middlewareEnhancer); Thunk 미들웨어(thunkMiddleware)는 위와 같이 Redux Store에 마운트할 수 있는데, 그 첫 과정으로 thunkMiddleware는 아래와 같은 함수에서 반환됨. 1. redux-thunk에서의 thunkMiddleware # // 'redux-thunk' index.js function createThunkMiddleware(extraArgument) { const m..
JavaScript/Redux 2022. 7. 2. 17:27
1. Thunk Middleware 앞서 Reducer는 Side-effect가 없는 순수함수여야 함을 알았음. 하지만, 네트워크 통신, 데이터 내보내기, setTimeout()와 같은 타이머 등 Side-effect가 없는 애플리케이션은 존재하지 않기 때문에 Redux에서 Side-effect를 다룰 수 있는 방법이 필요함. 이러한 Side-effect를 처리하기 위해 disptach()가 Store에 작업을 전달하기 전에 특수한 일을 할 수 있도록 disptach를 커스텀하는 함수인 Middleware라는 개념이 도입됨. Middleware는 UI 컴포넌트와 Store의 연결 다리 역할을 하기 때문에 Middleware에는 일반 객체가 아닌 값(ex. Promise)이 전달될 수 있고(순수함수일 필요..