reactjs - 使用 redux 形式时如何将 Dispatch 传递给操作

Question

我有以下搜索组件

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';

import { search } from '../../actions/actions'

class Search extends Component {

    render() {
        const {handleSubmit, "fields":{query}} = this.props;

        return (
            <div>
                <form onSubmit={handleSubmit(search)}>
                    <Field className='searchInput' name="query" component="input" type="text" placeholder="Enter course name"/>
                    <button className='searchSubmit' type='submit' >Search</button>
                </form>
            </div>
        );
    }
}
export default reduxForm({
    "form":"searchForm",
    "fields":["query"]
}, null, {search})(Search);

我的搜索操作是这样的

search : function(query){
    var data = {
        ep:"EP_SEARCH",
        payload:{
            query: query.query
        }
    }

    getAsynch(data).then(function(result){
        return {type: GET_DATA, payload:result};
    })
}

我从端点收到了带有结果的响应，但我需要以某种方式分派(dispatch)该操作。

我尝试过

getAsynch(data).then(function(result){
            return {type: GET_DATA, payload:result};
        })

这个

return function(dispatch){
    getAsynch(data).then(function(result){
        dispatch({type: GET_DATA, payload:result});
    })
}

但它会抛出一个错误，指出调度未定义。可能是因为我没有将它传递到组件中的任何位置。

Answer 1

由于这是一个异步操作，您将需要使用中间件来处理不同时间多个操作的分派(dispatch)。

操作创建者本质上是同步的，因此这就是为什么中间件是必要的，以便将来当响应从您的请求返回时分派(dispatch)同步操作。

为了掌握，我建议您使用 redux-thunk，因为它比主要的替代 redux-promise 中间件库更容易掌握。

Redux Thunk 中间件

Redux Thunk middleware allows you to write action creators that return a function instead of an action.

首先在商店配置期间设置 redux-thunk 中间件

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

现在 redux-thunk 知道如何处理特殊 thunk 操作的调度

thunk 操作只是一个返回另一个以调度作为参数的函数的操作。

Thunk Action 创建者

    function fetchThing(url) { 
        return (dispatch) => {
             /*dispatch more actions*/
        }
    }

这样做的优点是我们的组件可以像同步一样调度异步操作，并且不需要传递调度函数，因此不需要了解 Redux 存储。

redux-thunk 中间件知道在我们创建 thunk 操作后拦截它，并传入调度，以便将来的操作(例如 RESPONSE_RECEIVED 操作)将有权访问调度。

为了使用 redux-thunk 创建一个 Action 创建者，它返回一个接受调度作为参数的函数，如上所述。

示例

function epSearch(query){
    // thunk passes dispatch into the function below 
    // so that future actions will have access to dispatch

    return function(dispatch){

         // below function needs to return a promise in order for us to call .then
        getAsynch(data).then(   
          result => dispatch({ type: GET_DATA, payload:result }),
          error dispatch({ type: REQUEST_ERROR, payload: error })
        );
    };
}

如果 Promise 由于错误而没有得到解决，那么我们的 REQUEST_ERROR 操作将被调度，并且该操作的有效负载将是我们从被拒绝的 Promise 收到的错误

Redux Promise 和 Redux Thunk 的替代品

现在还有其他方法可以控制异步数据流。不过我认为 redux-thunk 简单又方便。 Redux Promise 是 Redux Thunk 的一个很好的替代品。这里的区别在于 redux-promise 是一个中间件，它拦截返回 Promise 而不是 thunk 的操作创建者。

但是严格来说，您在 redux 中根本不需要中间件来实现异步流程。它的优点是将数据流集中在一处，使您的组件更加解耦，因为它们不需要显式传递 Redux 存储的调度方法，因此不必关心如何和操作已创建。

有关 Redux 中中间件的深入讨论，请参阅 this answer由 Dan Abramov 提出，为什么我们需要中间件来实现 redux 中的异步流程，