我有以下搜索组件
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});
})
}
但它会抛出一个错误,指出调度未定义。可能是因为我没有将它传递到组件中的任何位置。
最佳答案
由于这是一个异步操作,您将需要使用中间件来处理不同时间多个操作的分派(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 中的异步流程,
关于reactjs - 使用 redux 形式时如何将 Dispatch 传递给操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41215239/