我是 dvajs 的新手。我正在使用 React 17,x, Typescript 4.2.3, antd 4.15.0, umi 3.4.7
问题。
如果我导航到/s/
页面,代码应该从 API 获取一些类别并向服务器发出另一个请求,此时在某些页面上显示它们。但是在调用搜索效果的那一刻,类别是空的,所以我尝试再次调用 getCategories 动作。但是类别仍然是空的。您如何从另一个动作中的动作获得结果?也许有某种调度链?
下面提供了代码
import { fetchCategories, makeSearch } from '@/services/search';
import { CategoriesModelStateSelector, Subscription } from '@@/plugin-dva/connect';
import { Reducer, Effect } from 'umi';
export type SearchModelState = {
searchResults: Provider[]
categories: Category[]
}
export type SearchModelType = {
namespace: string;
state: SearchModelState;
effects: {
getCategories: Effect;
search: Effect;
};
reducers: {
setCategories: Reducer
setSearchResults: Reducer
};
subscriptions: {
setup: Subscription
}
};
export type SearchModelStateSelector = {
search: SearchModelState
};
const SearchModel: SearchModelType = {
namespace: 'search',
state: {
categories: [],
searchResults: [],
},
effects: {
* getCategories({ payload }, { call, put, select }) {
const response = yield call(fetchCategories);
if (response) {
yield put({
type: 'setCategories',
payload: response,
});
}
},
* search({ payload }, { call, put, select }) {
let categories = yield select(({ categories: state }: CategoriesModelStateSelector) => state.categories);
// HERE categories are empty
console.log(categories);
yield put({
type: 'getCategories',
payload: {},
});
let catss = yield select(({ categories: state }: CategoriesModelStateSelector) => state.categories);
console.log(catss);
// HERE categories are still empty
const response = yield call(makeSearch, payload);
yield put({
type: 'setSearchResults',
payload: response,
});
},
},
reducers: {
setCategories(state, { payload }) {
return {
...state,
categories: response,
};
},
setSearchResults(state, { payload }) {
return {
...state,
searchResults: response,
};
},
},
subscriptions: {
setup({ dispatch, history }) {
// @ts-ignore
return history.listen(({ pathname, query }) => {
dispatch({ type: 'getCategories', payload: {} });
if (pathname === '/s' || pathname === '/s/') {
dispatch({ type: 'search', payload: query });
}
});
},
},
};
export default SearchModel;