从redux工具包异步thunk的挂起状态修改另一个片的状态,可以通过以下步骤实现:
下面是一个示例代码:
首先,在你的redux store中配置redux-thunk中间件:
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));
export default store;
然后,在你的action creator中进行异步操作,并在异步操作完成后分发一个普通的action对象:
import axios from 'axios';
export const fetchData = () => {
return async (dispatch) => {
dispatch({ type: 'FETCH_DATA_START' });
try {
const response = await axios.get('https://api.example.com/data');
dispatch({ type: 'FETCH_DATA_SUCCESS', payload: response.data });
} catch (error) {
dispatch({ type: 'FETCH_DATA_FAILURE', payload: error.message });
}
};
};
接着,在另一个片的reducer中根据接收到的action类型来更新状态:
const initialState = {
data: null,
loading: false,
error: null,
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'FETCH_DATA_START':
return { ...state, loading: true };
case 'FETCH_DATA_SUCCESS':
return { ...state, loading: false, data: action.payload };
case 'FETCH_DATA_FAILURE':
return { ...state, loading: false, error: action.payload };
default:
return state;
}
};
export default reducer;
这样,当你调用fetchData action creator时,它会触发异步操作并更新另一个片的状态。你可以根据具体的业务需求来修改和扩展这个示例代码。
关于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,建议你参考腾讯云官方文档或者咨询腾讯云的技术支持团队,以获取与你的需求匹配的产品和服务信息。
领取专属 10元无门槛券
手把手带您无忧上云