Question

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

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

相反，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事件的reducer;它将一个或多个用户的传入数组与已在内存中的用户数组合并。减速器很容易编写。这就是我改用redux的原因：一个商店，纯粹的功能。但这种蠢事是绝对的噩梦。

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

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

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

PLZ HALP。我真的不明白。我无法相信人们会忍受这一切。

编辑：为了提供一些背景信息，我认为我应该能够执行哪种动作，以及哪些动作令人沮丧：< / p>

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除了返回使用我选择的值解析的promises之外，还会将数据作为副作用发送到商店。我认为调度正在发生，但链断裂，因为这些行为都没有返回承诺 - 它们返回普通函数。

这不仅比Flux更糟糕，似乎难以理解。我无法相信所有这些疯狂只是为了将应用程序状态整合到一个减少存储中。

是的 - 我尝试使用其ReducerStore的新版本的flux，但它对与反应原生不兼容的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动作。如果您的操作返回一个函数，则需要将调度传递给该操作。

看看这个action creator（这是一个功能齐全的真实应用程序，随时可以随意浏览），查看第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作为参数，因此您也需要将其传递给它。

一旦完成，从thunk动作返回一个promise就行了。事实上，我上面给出的例子确实如此。 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 });
        });
    };
};

如何在非假冒应用程序

1 个答案: