如何在非假应用程序中编写异步 Redux 操作

Question

tl;dr：我需要一个异步 redux-thunk 操作的示例，展示如何进行异步调用（例如 fetch ），并触发状态更新。我还需要了解有人如何将多个此类操作链接在一起，例如：（1）查看用户是否存在于云中，然后（2）如果不存在，则注册它们，然后（3）使用新用户记录获取更多数据。

---

我找到的所有示例都假设 redux 存储可以直接导入到定义操作的模块中。我的理解是，这是一种不好的做法：调用组件负责通过this.props.dispatch（来自通过<Provider>注入的商店）提供对商店的访问。

相反，redux 世界中的每一个操作都应该返回一个函数，该函数将接收适当的dispatch;该函数应该完成工作，并返回...东西。Obv，重要的是东西是什么。

这是我根据文档尝试过的模式，该模式已被证明是失败的。文档中没有任何内容明确说明为什么这不起作用，但它没有 - 因为此操作不会返回承诺。

/**
 * pushes a new user into the cloud; once complete, updates the store with the new user row
 * @param  {hash} user - of .firstName, .lastName
 * @return {promise} resolves with user { userId, firstName, lastName, dateCreated }, or rejects with error
 */
Actions.registerUser = function(user) {
    return function reduxAction(dispatch) {
        return API.createUser(user) // API.createUser just does return fetch(...)
        .then(function onUserRegistered(newUser) {
            return dispatch({
                type: 'ADD_USERS',
                users: [newUser]
            });
        });
    };
};

我有一个响应ADD_USERS事件的化简器;它将一个或多个用户的传入数组与内存中已有的用户数组合并。减速器易于编写。这就是我切换到redux的原因：一个商店，纯功能。但这种笨拙的生意绝对是一场噩梦。

我收到的错误是.then在Actions.registerUser上未定义 - 即Actions.registerUser不返回承诺。

我认为问题显然是我返回了一个函数 - reduxAction函数 - 但这似乎没有可协商。在存储中拍摄数据的唯一方法是使用提供的dispatch方法，这意味着我无法返回承诺。

将onUserRegistered更改为仅调用 dispatch 然后返回所需的值也不起作用，让它返回实际的承诺也不起作用。

PLZ HALP。我真的不明白。我不敢相信人们能忍受这一切。

---

编辑：为了提供一些背景，这是我认为我应该能够执行的那种动作组合，这些令人沮丧的动作：

Actions.bootSetup = function() {
    return dispatch => {
        return Actions.loadUserId() // looks for userId in local storage, or generates a new value
        .then(Actions.storeUserId) // pushes userId into local storage
        .then((userId) => {
            return Actions.fetchUsers(userId) // fetches the user, by id, from the cloud
            .then((user) => {
                // if necessary, pushes the user into the cloud, too
                return user || Actions.postUser({ userId: userId, firstName: 'auto-registered', lastName: 'tbd'}); 
            });
        })
        .then((user) => {
            console.log(`boot sequence complete with user `, user);
            return dispatch({ type: 'ADD_OWNER', user });
        });
    };
};

我希望Actions.storeUserId和Actions.fetchUsers除了返回以我选择的值解析的承诺外，还会将数据作为副作用发送到商店。我认为调度正在发生，但链条断裂，因为这些操作都没有返回承诺——它们返回普通函数。

这不仅看起来比Flux糟糕得多，而且似乎难以理解。我不敢相信所有这些疯狂只是为了将应用程序状态整合到一个单一的减少商店中。

是的 - 我已经尝试了新版本的 flux，它的 ReducerStore，但它对与 react-native 不兼容的 CSS 库有一些不适当的依赖。项目维护者表示他们不打算解决这个问题。我想他们的状态容器依赖于 CSS 功能。

---

编辑：我的商店

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import Reducers from './reducers';
const createStoreWithMiddleWare = applyMiddleware(thunk)(createStore);

export const initialState = {
    users: [] // will hold array of user objects
};
const store = createStoreWithMiddleWare(Reducers);
export default store;

---

编辑：这是调用代码。这是根级反应本机组件。

// index.ios.js
import Store from './store';
class myApp extends Component {
    componentDidMount() {
        Store.dispatch(Actions.bootSetup())
        .then(() => {
            console.log('*** boot complete ***');
        });
    }
    render() {
        return (
            <Provider store={Store}>
                <ApplicationRoutes />
            </Provider>
        );
    }
}

我的假设是Store.dispatch期望一个函数，并为其提供对商店调度方法的引用。

Answer 1

我可以立即看到一个错误

Actions.bootSetup = function() {
    return dispatch => {
        return Actions.loadUserId()

您没有正确链接 thunk 操作。如果操作返回函数，则需要将调度传递给该操作。

看看这个动作创建器（这是一个功能齐全的现实世界应用程序，随意戳一下），看看第 9 行，loginUser 被调用的地方。

export function changePassword(credentials) {
    return (dispatch, getState) => {
        dispatch(changePasswordStart(credentials))
        return Firebase.changePassword(credentials)
            .then(() => {
                return logout()
            })
            .then(() => {
                return loginUser(credentials.email, credentials.newPassword)(dispatch)
            })
            .then(() => {
                    dispatch(changePasswordSuccess(credentials))
                    toast.success('Password successfully changed')
            }).catch(error => {
                    dispatch(changePasswordError(error.code))
                    toast.error('An error occured changing your password: ' + error.code)
            })
    }
}

由于loginUser也是一个 thunk 操作，因此需要将调度传递给调用它的结果。如果你考虑一下，这是有道理的：thunk 什么都不做，它只是创建一个函数。您需要调用它返回的函数以使其执行操作。由于它返回的函数将dispatch作为参数，因此您也需要将其传入。

一旦完成，从投掷动作中返回承诺将起作用。事实上，我上面给出的例子正是这样做的。 loginUser返回一个承诺，changePassword 也是如此。两者都是可取的。

您的代码可能需要看起来像这样（虽然我不确定，我没有调用操作）

Actions.bootSetup = function() {
    return dispatch => {
        return Actions.loadUserId()(dispatch) // pass dispatch to the thunk
        .then(() => Actions.storeUserId(dispatch)) // pass dispatch to the thunk
        .then((userId) => {
            return Actions.fetchUsers(userId)(dispatch) // pass dispatch to the thunk
            .then((user) => {
                // pass dispatch to the thunk
                return user || Actions.postUser({ userId: userId, firstName: 'auto-registered', lastName: 'tbd'})(dispatch); 
            });
        })
        .then((user) => {
            console.log(`boot sequence complete with user `, user);
            return dispatch({ type: 'ADD_OWNER', user });
        });
    };
};