redux-dataloader - GitLite

KO | EN

gitlite — search

#hacktoberfest #ai #typescript #android #machine-learning #docker #macos #cli #kubernetes #vue #awesome-list #pytorch #mcp #open-source

redux-dataloader

(★ 139)

Loads async data for Redux apps focusing on preventing duplicated requests and dealing with async dependencies.

파일 탐색기

최종 버전 다운로드 (.zip)

- actions.js
- constants.js
- createDataLoaderMiddleware.js
- createLoader.js
- index.js
- load.js
- Task.js
- TaskDescriptor.js
- utils.js
- waitStrategies.js
- actions.test.js
- createDataLoaderMiddleware.test.js
- createLoader.test.js
- index.test.js
- load.test.js
- TaskDescriptor.test.js
- utils.test.js
- waitStrategies.test.js
.babelrc
.editorconfig
.gitignore
.tern-project
API.md
circle.yml
LICENSE
mocha.opts
package-lock.json
package.json
README.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/kouhin/redux-dataloader

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd redux-dataloader

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install redux-dataloader --save

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Redux Data Loader

[![CircleCI](https://circleci.com/gh/kouhin/redux-dataloader.svg?style=svg)](https://circleci.com/gh/kouhin/redux-dataloader)
[![npm](https://img.shields.io/npm/v/redux-dataloader.svg)](https://npmjs.org/package/redux-dataloader)

Loads async data for Redux apps focusing on preventing duplicated requests and dealing with async dependencies.

Deeply inspired by [alt Data Souces API](http://alt.js.org/docs/async), also inspired by [redux-saga](https://github.com/yelouafi/redux-saga).

Instead of using redux-thunk, it handles wrapped actions and sideload async data.
It also caches data requests for a while in order to prevent duplicated requests.

## Installation

```
npm install redux-dataloader --save
```

## Usage

### 1. Define actions and update the request action with load()

#### `userActions.js`
```javascript
import { load } from 'redux-dataloader';

export const FETCH_USER_REQUEST = 'myapp/user/FETCH_USER/REQUEST';
export const FETCH_USER_SUCCESS = 'myapp/user/FETCH_USER/SUCCESS';
export const FETCH_USER_FAILURE = 'myapp/user/FETCH_USER/FAILURE';

export function fetchUserRequest(username) {
  // use `load` to wrap a request action, load() returns a Promise
  return load({
    type: FETCH_USER_REQUEST,
    payload: {
      username: username,
    },
  })
}

export function fetchUserSuccess(username, data) {
  // ...
}

export function fetchUserFailure(username, error) {
  // ...
}

```

### 2. Create a data loader

#### `dataloaders.js`

```javascript
import { createLoader, fixedWait } from 'redux-dataloader';

import * as userActions from './userActions';

const userLoader = createLoader(userActions.FETCH_USER_REQUEST, {
  /*
   * (required) Handle fetched data, return a success action
   */
  success: (context, result) => {
    // you can get original request action from context
    const action = context.action;
    const username = action.payload.username;
    return userActions.fetchUserSuccess(username, result);
  },
  /*
   * (required) Handle error, return a failure action
   */
  error: (context, error) => {
    const action = context.action;
    const username = action.payload.username;
    return userActions.fetchUserFailure(username, error);
  },
  /*
   * (optional) By default, original request action will be dispatched. But you can still modify this process.
   */
  // loading: ({ action }) => {}
  /*
   * (required) Fetch data.
   * We use yahoo/fetchr as an example.
   */
  fetch: (context) => {
    const action = context.action;
    const username = action.payload.username;

const fetchr = context.fetchr;
    return fetchr.read('userService')
      .params({
        username,
      }).end();
  },
  /*
   * (optional) !!! Different from alt API.
   * When shouldFetch returns false, it will prevent fetching data.
   */
  shouldFetch: (context) => {
    const action = context.action;
    const username = action.payload.username;
    const getState = context.getState;
    return !getState().user.users[username];
  }
}, {
  ttl: 10000,
  retryTimes: 3,
  retryWait: fixedWait(500),
});

export default [userLoader];
```

### 3. Register middleware

#### `configureStore.js`

```javascript
import { createStore, applyMiddleware } from 'redux';
import { createDataLoaderMiddleware } from `redux-dataloader`;
import { Fetchr } from 'fetchr';
import reducer from './reducers';
import loaders from './dataloaders';

const fetcher = new Fetcher({
  xhrPath: '/api',
});

// create middleware, you can add extra arguments to data loader context
const dataLoaderMiddleware = createDataLoaderMiddleware(loaders, { fetchr });

const store = createStore(
  reducer,
  applyMiddleware(dataLoaderMiddleware)
)

// ...
```

### 4. Use it for your application

Then, just use it in your application.
The following is an example that combined with [redial](https://github.com/markdalgleish/redial) for isomorphic use.

```javascript
import { provideHooks } from 'redial';
import { fetchUserRequest } from 'userActions';
import { fetchArticleRequest } from 'articleAction';
import { fetchArticleSkinRequest } from 'articleSkinAction';

// the router location is: /:username/:articleId
// Data dependency: user <= article <= articleSkin
async function fetchData({param, dispatch, getState}) {
  try {
    // 1. Fetch user
    const username = params.username;
    await dispatch(fetchUserRequest(username)); // wait for response

// 2. Fetch article by userId and articleId, you may use useId for authentication
    const user = getState().user.users[username];
    if (!user) {
      throw new Error(`user_not_found: ${username}`);
    }
    const articleId = params.articleId;
    await dispatch(fetchArticleRequest(user.id, articleId));

// 3. Fetch article skin by articleId
    const article = getState().article.articles[articleId];
    if (!article) {
      throw new Error(`article_not_found: ${articleId}`);
    }
    await dispatch(fetchArticleSkinRequest(article.skinId));
  } catch (err) {
    // ...
  }
}

function mapStateToProps(state, owndProps) {
  // ...
}

@connect(mapStateToProps)
@provideHooks({
  fetch: fetchData,
})
export default class ArticleContainer extends React.Component {
  // ...
}
```

You can also write `fetchData()` with Promise:

```javascript
function fetchData({param, dispatch, getState}) {
  return Promise.resolve().then(() => {
    // 1. Fetch user
    const username = params.username;
    return dispatch(fetchUserRequest(username));
  }).then(() => {
    // 2. Fetch article by userId and articleId, you may use useId for authentication
    const user = getState().user.users[username];
    if (!user) {
      throw new Error(`user_not_found: ${username}`);
    }
    const articleId = params.articleId;
    return dispatch(fetchArticleRequest(user.id, articleId));
  }).then(() => {
    // 3. Fetch article skin by articleId
    const article = getState().article.articles[articleId];
    if (!article) {
      throw new Error(`article_not_found: ${articleId}`);
    }
    return dispatch(fetchArticleSkinRequest(article.skinId));
  }).catch((err) => {
    // error handler
    // ...
  })
}
```

## Documentation

- [API](/API.md)

## License

MIT