使用 Promise.all 和 React-Redux-Thunk 的 better/correct 方法是什么？

Question

export const FETCH_DB_BEGIN = 'FETCH_DB_BEGIN'
export const FETCH_DB_SUCCESS = 'FETCH_DB_SUCCESS'
export const FETCH_DB_FAILURE = 'FETCH_DB_FAILURE'

export const fetchDatabase = () => {
    return dispatch => {
        const profile_url = 'localhost:5000/profiles'
        const release_url = 'localhost:5000/releases'
        const emp_url = 'localhost:5000/users'
        let promises = []

        let options = {
            headers: header,
            method: 'get',
            mode: 'cors',
            body: null,
        }
        dispatch(fetchDbBegin());

        // run the script async. change state when it's done.
        let profile_promise = new Promise((resolve, reject) => {
            fetch(profile_url, options)
                .then(res => res.json())
                .then(resText => {
                    // Use Dispatch Here?
                })
        }).catch(err => {
            console.log(err)
        })
        promises.push(profile_promise)

        // run the script async. change state when it's done.
        let release_promise = new Promise((resolve, reject) => {
            fetch(release_url, options)
                .then(res => res.json())
                .then(resText => {
                })
        }).catch(err => {
            console.log(err)
        })
        promises.push(release_promise)

        // run the script async. change state when it's done.
        let emp_promise = new Promise((resolve, reject) => {
            fetch(emp_url, options)
                .then(res => res.json())
                .then(resText => {

                })
        }).catch(err => {
            console.log(err)
        })
        promises.push(emp_promise)

        Promise.all(promises).then(values => {
            console.log(values)
        })
    }
}

export const fetchDbBegin = () => ({
    type: FETCH_DB_BEGIN
});

export const fetchDbSuccess = (data) => ({
    type: FETCH_DB_SUCCESS,
    payload: { data }
});

export const fetchDbFailure = (err) => ({
    type: FETCH_DB_FAILURE,
    payload: { err }
});

我正在重构 React class 组件以使用 Redux。它最初在 componentDidMount 中有所有 API 个调用，而且它太乱了。

我正在使用 redux-thunk 将其从 class 组件中移出。

我的 databaseAction.js 中的 fetchDatabase 执行 componentDidMount 在 class 组件中执行的所有操作。

通常情况下，如果是单个 API 调用，我会在 API 调用成功完成时立即发送 fetchDbSuccess。但是，使用需要三个异步 API 调用的 Promise.All，我不确定我是否应该

为每个 API 调用（fetchProfileSuccess、fetchReleaseSuccess 和 fetchUserSuccess）创建一个单独的操作，并在每个 Promise（我在代码中放置 //Use Dispatch Here? 的地方。

或

当 Promise.all 得到解决时，只需发送单个 fetchDbSuccess。

如果我选择执行 2，我是否应该更新我的减速器中的所有三个 states？

谢谢

Answer 1

如果您的代码关心所述状态更新，您应该只分派和更新状态。例如，如果您只想显示一个微调器，然后让微调器在完全完成后消失，您的用户不一定关心每个原子操作，因此您不需要将其反映在状态中。如果你有一个 UI 确实显示每个，那么你会想要那些额外的调度。

顺便说一下，您的 Promise 看起来有点过于复杂。如果您决定不需要这些额外的状态更改，您可以简化为：

export const FETCH_DB_BEGIN = 'FETCH_DB_BEGIN'
export const FETCH_DB_SUCCESS = 'FETCH_DB_SUCCESS'
export const FETCH_DB_FAILURE = 'FETCH_DB_FAILURE'

export const fetchDatabase = () => {
    return dispatch => {
        dispatch(fetchDbBegin());

        const urls = [
            'http://localhost:5000/profiles',
            'http://localhost:5000/releases',
            'http://localhost:5000/users'
        ];

        const options = {
            headers: header,
            method: 'get',
            mode: 'cors',
            body: null,
        }

        const fetchJson = url => fetch(url, options).then(res => res.json());

        Promise.all(urls.map(fetchJson))
            .then(([profile, release, employee]) => {
                dispatch(fetchDbSuccess({ profile, release, employee }));
            })
            .catch(err => {
                dispatch(fetchDbFailure(err));
            });
    }
}

export const fetchDbBegin = () => ({
    type: FETCH_DB_BEGIN
});

export const fetchDbSuccess = (data) => ({
    type: FETCH_DB_SUCCESS,
    payload: { data }
});

export const fetchDbFailure = (err) => ({
    type: FETCH_DB_FAILURE,
    payload: { err }
});

使用 Promise.all 和 React-Redux-Thunk 的 better/correct 方法是什么？

What is the better/correct way of using Promise.all with React-Redux-Thunk?

javascript

reactjs

redux

redux-thunk