Skip to content

Instantly share code, notes, and snippets.

View stsiwo's full-sized avatar

sts stsiwo

17 followers · 54 following
View GitHub Profile
@stsiwo
stsiwo / mastering-cache-with-reactjs-1-fetch-domain-worker.tsx
Created February 17, 2021 21:07
mastering-cache-with-reactjs-1-fetch-domain-worker
/**
* a worker (generator) to fetch anime domain data from the backend API
**/
export function* fetchAnimeWorker(action: PayloadAction<{}>) {
/**
* get current pagination for this fetching
**/
const curPagination: DomainPaginationType = yield select(mSelector.makeAnimePaginationDataSelector())
@stsiwo
stsiwo / mastering-api-request-with-reactjs-2-redux-saga-worker-with-its-dependencies.tsx
Created February 17, 2021 18:41
mastering-api-request-with-reactjs-2-redux-saga-worker-with-its-dependencies
/**
* a worker (generator) to handle an api request for domain data with its input state
*
**/
export function* fetchAnimeWorker(action: PayloadAction<{}>) {
/**
* get current pagination for this fetching
**/
@stsiwo
stsiwo / mastering-api-request-with-reactjs-1-initial-useeffect.tsx
Created February 17, 2021 18:18
mastering-api-request-with-reactjs-1-initial-useeffect
/**
* a UI component to dispatch an action to send an API request
**/
const Search: React.FunctionComponent<{}> = (props) => {
// retrieve current states from the redux store via the memorized selector
const curSort = useSelector(mSelector.makeCurSortSelector())
const curSearchKeyword = useSelector(mSelector.makeSearchKeywordSelector())
const curCategory = useSelector(mSelector.makeCurCategorySelector())
@stsiwo
stsiwo / mastering-sort-and-filter-with-reactjs-5-worker-to-fetch.tsx
Created February 17, 2021 16:29
mastering-sort-and-filter-with-reactjs-5-worker-to-fetch
/**
* a worker (generator) to fetch anime data from the backend API
*
**/
export function* fetchAnimeWorker(action: PayloadAction<{}>) {
// ...
/**
* get current sort for search
@stsiwo
stsiwo / mastering-sort-and-filter-with-reactjs-4-useeffect.tsx
Created February 17, 2021 16:24
mastering-sort-and-filter-with-reactjs-4-useeffect
/**
* a UI component to dispatch an action to send an API request
**/
const Search: React.FunctionComponent<{}> = (props) => {
// retrieve current sort state from the redux store via the memorized selector
const curSort = useSelector(mSelector.makeCurSortSelector())
// ...
@stsiwo
stsiwo / mastering-sort-and-filter-with-reactjs-3-sorting-filtering-reducer.tsx
Created February 17, 2021 16:21
mastering-sort-and-filter-with-reactjs-3-sorting-filtering-reducer
/**
* app.curSort state Slice and its action type
**/
export type curSortUpdateActionType = PayloadAction<SortType>
export const curSortSlice = createSlice({
name: "app/curSort", // a name used in action type
initialState: null,
reducers: {
/**
@stsiwo
stsiwo / mastering-sort-and-filter-with-reactjs-2-event-handler.tsx
Created February 17, 2021 16:16
mastering-sort-and-filter-with-reactjs-2-event-handler
/**
* a UI component to handle sorting feature
**/
const SearchController: React.FunctionComponent<SearchControllerPropsType> = ({
className,
}) => {
/**
* sort feature
**/
@stsiwo
stsiwo / mastering-sort-and-filter-with-reactjs-1-initial-ui-component.tsx
Created February 17, 2021 16:13
mastering-sort-and-filter-with-reactjs-1-initial-ui-component
/**
* a UI component to handle sorting feature
**/
const SearchController: React.FunctionComponent<SearchControllerPropsType> = ({
className,
}) => {
/**
* sort feature
**/
@stsiwo
stsiwo / mastering-typeahead-search-with-reactjs-5-worker-to-fetch.tsx
Created February 17, 2021 00:17
mastering-typeahead-search-with-reactjs-5-worker-to-fetch
/**
* a watcher (generator) to watch anime fetching worker (the below worker) with its action type
**/
export function* fetchAnimeWatcher() {
/**
* pick this action only once (most latest one) per 500ms no matter how many actions you dispatched.
*
* - 'debounce' built-in function is also a good candidate for typeahead.
* debounce: pick this action only once after a given time no matter how many actions you dispatched.
*
@stsiwo
stsiwo / mastering-typeahead-search-with-reactjs-4-useeffect.tsx
Last active February 16, 2021 23:53
mastering-typeahead-search-with-reactjs-4-useeffect
/**
* a UI component to dispatch an action to send an API request
**/
const Search: React.FunctionComponent<{}> = (props) => {
// retrieve current search keyword state from the redux store via the memorized selector
const curSearchKeyword = useSelector(mSelector.makeSearchKeywordSelector())
// ...