redux-saga

urTweet
[modules] React + Data fetch handling
고민하게 된 시점 나의 최대 관심사는 뷰(View)를 작업하기 위함이다. 컴포넌트의 역할은 단순히 데이터가 오면 뷰를 보여주기만 하면 된다. 하지만, 여기서 다이나믹 뷰를 위해 비즈니스 로직을 컴포넌트 공간에서 작성하게 되면, 의존성 결합이 상당하다. 오직 뷰만 작업했던 공간이, fetch("url")로 데이터 오고 가는 형태까지 작성하게 되었다. function App() { const [data, setData] = useState({ hits: [] }); const [query, setQuery] = useState('redux'); const [url, setUrl] = useState( 'https://hn.algolia.com/api/v1/search?query=redux', ); const..
→2021.11.22
urTweet
[helper] Redux + Redux-saga
Preview redux는 단순히 전역 상태 관리를 위한 도구였다. 하지만 우리는 data fetch handling을 통해서 정보 저장을 많이 하기 때문에 redux-saga(middleware)와 redux 결합을 많이 이용하고 있다. (redux-toolkit에서는 crateAsyncthunk가 있다) 여기서 api 추가할 때마다, action과 fetch 상태를 만들어줘야 하는 중복 패턴이 발생하게 되어 이것을 쉽게 해결하고자 helper 함수를 제작하였다. helper/type.d.ts 전체 코드 helper에서 공통으로 사용하는 type 관리 코드 설명 import { ActionCreatorWithPreparedPayload } from '@reduxjs/toolkit'; import { F..
→2021.11.12
urTweet
[setting] Next + Redux
Preview reducer, saga, store, type 설정 store/rootReducer.ts 전체 코드 reducer 여러 reducer 들을 combineReducers로 하나로 묶음 const reducer = combineReducers({ [FETCH_STATUS]: fetchStatusReducer, [USER]: userReducer, [POST]: postReducer, [HASHTAG]: hashtagReducer, }); RootState[type] redux에서 state 타입을 항상 써야 하기 때문에 import 하지 않고 global 영역으로 declare 선언 declare global { type RootState = ReturnType; } rootReducer n..
→2021.11.11

• 이전
• 1
• 다음