javascript - 我如何从 API 模块分派(dispatch) redux 操作？

Question

我正在使用 Redux 方法在 React Native 中构建一个应用程序。

我希望能够从我的 API“模块”分派(dispatch)操作。

有可能，每个 API 请求都可能超时(或失败)，如果发生这种情况，我想向我的全局 reducer (处理 errorBar 消息和状态)分派(dispatch)一个操作。我不想为场景或组件内的每个结果(每个 API 请求)分派(dispatch)该消息。

我的结构如下(大部分内容被删除):

index.android.js

import React from 'react';
import { AppRegistry } from 'react-native';

import configureStore from './app/store/configureStore'; // combines all reducers
const store = configureStore();

import RootContainer from './app/containers/rootContainer';
import { Provider } from 'react-redux';

const App = () => (
    <Provider store={store}>
        <RootContainer/>
    </Provider>
);

// Register our app
AppRegistry.registerComponent('ReduxTest', () => App);

根容器:

import { connect } from 'react-redux';

import RootScene from '../components/scenes/RootScene';
import { hideSplash, showSplash, setSplashMessage } from '../actions/splashActions';

function mapStateToProps(state) {
    return {
        global: state.globalReducer,
        splash: state.splashReducer
    };
}

export default connect(
    mapStateToProps,
    {
        hideSplash: () => hideSplash(),
        showSplash: () => showSplash(),
        setSplashMessage: (message) => setSplashMessage(message)
    }
)(RootScene);

RootScene.js

import React, { Component } from 'react';

import Splash from '../views/Splash';
import ErrorBar from '../elements/ErrorBar';

import { View, Text, StyleSheet } from 'react-native';

import api from '../../helpers/api';

class RootScene extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    componentWillMount() {
        api.checkConnectivity().then(response => {
            // Hide splash, etc, optimally error states could be handled inside of "api"

        });
    }

    render() {
        return (
            <View style={styles.rootWrapper}>
                <ErrorBar props={this.props.global.errorBar}/>
                <Splash/>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    rootWrapper: {
        flex: 1
    }
});

export default RootScene;

api.js

const api = {
    checkConnectivity() {
        return _buildRequest({ endpoint: '/version' }).then(_makeRequest);
    }
};

module.exports = api;


const _buildRequest = (request_data) => {
    // ... 
};

const _makeRequest = (request_object) => {
    // ... 
};

我知道上面删除的代码缺少更改错误栏状态的操作。

如果我构建应用程序的方式完全疯狂，那么我洗耳恭听。

Answer 1

不要将 API 作为“模块”，而是尝试将其用作中间件。因此，您将可以在您的上下文中访问dispatch()。

这个想法是调度操作，并根据操作，您的中间件将“决定”调用您的 api。如果出现错误，中间件可以调度您的默认错误操作。

这篇文章可能对您有帮助:http://www.sohamkamani.com/blog/2016/06/05/redux-apis/

您还可以使用 redux-api-middleware: https://github.com/agraboso/redux-api-middleware