Question

我在查看在react / redux应用程序中将异步副作用处理程序放在哪里时遇到了一些麻烦。

我正在使用react-router，并且我的所有根（或几乎根）级容器都在调用dispatch并接收更新，没有任何问题。复杂的是异步服务适合这种情况。这是一个例子：

路线

<Route path='/' component={App}>
    <Route path='/home' component={Home} />
    <Route path='/locations' component={Locations} />
    <Route path='/something-else' component={SomethingElse} />
</Route>

让我们看看各个地点，我们需要提取某些东西可能并不奇怪：

class Locations extends React.Component<LocationsProps, void> {
    private _service: StoreService;

    constructor(props) {
        super(props);
        this._service = new StoreService();
    }

    render(): JSX.Element {
        const { status, stores, selectedStore } = this.props;
        return (
            <fieldset>
                <h1>Locations</h1>
                <StoresComponent 
                    status={status} 
                    stores={stores} 
                    selectedStore={selectedStore}
                    onFetch={this._onFetch.bind(this)}
                    onSelect={this._onStoreSelect.bind(this)} />
            </fieldset>
        );  
    }

    private _onFetch(): void {
        const { dispatch } = this.props;
        dispatch(fetchStores());

        this._service.find()
            .then(stores => dispatch(loadStores(stores)));
    }

    private _onStoreSelect(id: string): void {
        const { dispatch } = this.props;
        dispatch(selectStore(id));
    }

    static contextTypes: React.ValidationMap<any> = {
        status: React.PropTypes.string,
        stores: React.PropTypes.arrayOf(React.PropTypes.object)
    };
}

function mapStateToProps(state) {
    return {
        status: state.stores.status,
        stores: state.stores.list,
        selectedStore: state.stores.selectedStore
    };
}

export default connect(mapStateToProps)(Locations);

我有一个非常愚蠢的商店组件，它依赖于它的容器来完成大部分工作。 Locations容器主要是哑，但困扰我的部分是_onFetch()方法，由商店组件内部的按钮点击触发。

onFetch()正在调度该操作，即将状态设置为＆＃34;抓取＆＃34;，但它也会与StoreService进行交互，感觉很臭。应该如何处理？那么Locations可以只调度动作并等待其道具更新？

我考虑的内容

我考虑过将所有API互动转移到顶级＆＃34; app＆＃34;容器，但仍然感觉不太对劲。是否可以订阅“无头”＆＃34;监听应用程序状态？即不会呈现任何内容的东西，只会监视获取请求并触发类似的内容：

this._storeService.find()
    .then(stores => dispatch(loadStores(stores)));

Answer 1

使用传奇来执行任何副作用，例如async，setinterval等。

如何处理react / redux中的副作用？

1 个答案: