请求代码:
export class LogInContainer extends Component {
submit = (values) => {
const { mutate } = this.props;
mutate({
variables: {
email: values.email,
password: values.password,
},
})
.then((res) => {
const token = res.data.login.token;
localStorage.setItem("token", token);
const user = res.data.login.user;
const { logIn } = this.props;
logIn(user);
this.props.history.push("/pages/processes");
})
.catch((error) => {
const errorMessage = error.message;
const { logInError } = this.props;
logInError(errorMessage);
});
};
render() {
const { error, logInCleanError } = this.props;
return (
<LogIn
onSubmit={this.submit}
errorMessage={error}
logInCleanError={logInCleanError} …Run Code Online (Sandbox Code Playgroud) 我正在尝试在货币转换器应用程序中使用 RTK 查询。这个应用程序是基于2个API。
首先,我正在获取一个带有货币的对象。然后,我获取一系列国家/地区并对其进行过滤,具体取决于该国家/地区是否拥有该种货币。
商店代码:
export const store = configureStore({
reducer: {
[currenciesAPI.reducerPath]: currenciesAPI.reducer,
[countriesAPI.reducerPath]: countriesAPI.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(currenciesAPI.middleware, countriesAPI.middleware)
})
Run Code Online (Sandbox Code Playgroud)
API代码:
export const currenciesAPI = createApi({
reducerPath: 'currenciesAPI',
baseQuery: fetchBaseQuery({ baseUrl: 'https://api.frankfurter.app'}),
endpoints: (build) => ({
fetchAllCurrencies: build.query<Currencies, void>({
query: () => ({
url: '/currencies'
}),
})
})
})
export const countriesAPI = createApi({
reducerPath: 'countriesAPI',
//tagTypes: ['Country'],
baseQuery: fetchBaseQuery({ baseUrl: 'https://restcountries.com/v3.1'}),
endpoints: (build) => ({
fetchAllCountries: build.query<TransformedCountries[], string>({
query: () => ({
url: '/all'
}),
transformResponse: …Run Code Online (Sandbox Code Playgroud)