从 React Native Text Input 向 Redux Toolkit 的 createApi 添加动态数据？答案

【问题标题】：Adding dynamic data to Redux Toolkit's createApi from React Native Text Input?从 React Native Text Input 向 Redux Toolkit 的 createApi 添加动态数据？
【发布时间】：2021-12-14 04:32:25
【问题描述】：

这里是新开发人员。我已经被困在这个问题上太久了，已经没有地方可以转了！

技术：反应原生 Redux 工具包

我正在尝试从 RN 上的文本输入中获取数据并将其添加到我的 RTK createApi 调用中。

RTK website 显示：

export const pokemonApi = createApi({
  reducerPath: 'pokemonApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
  endpoints: (builder) => ({
    getPokemonByName: builder.query({
      query: (name) => `pokemon/${name}`,
    }),
  }),
})

我希望我可以做类似的事情而不是 ${name} 是动态的，这将是我的文本输入数据？有没有人见过这样的例子？数据必须先到达切片然后再到达 API 吗？我需要 createAsyncThunk 吗？

到目前为止，我尽量不要在这里过于冗长。数据正在进入切片，但不确定从那里去哪里？

electedApi.js（API 调用）

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { useSelector, useDispatch } from 'react-redux';
import { getAddress } from '../../services/slices/addressSlice';

export const electedsApi = createApi({
  reducerPath: 'newsApi',
  baseQuery: fetchBaseQuery({
    baseUrl: 'baseurl.help.com',
  }),
  endpoints: builder => ({
    getElectedByAddress: builder.query({
      const { address } = useSelector(state => state.address);
      query: address => `${address}`,
    }),
  }),
});

addressSlice.js（状态）

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  loading: false,
  address: '',
};

export const addressSlice = createSlice({
  name: 'address',
  initialState,
  reducers: {
    getAddress: (state, action) => {
      state.address = action.payload;
      console.log(state.address + 'from slice');
    },
  },
});
export const { getAddress } = addressSlice.actions;

export default addressSlice.reducer;

Landing.js（表单输入）

import React, { useState } from 'react';
import { Text, Image, TouchableOpacity, TextInput, Alert } from 'react-native';
import { StyleSheet } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { useDispatch, useSelector } from 'react-redux';
import { getAddress } from '../../services/slices/addressSlice';

export default function Landing({ navigation }) {
  const [text, setText] = useState();
  const dispatch = useDispatch();

  const handlePress = () => {
    if (!text) {
      Alert.alert('please enter address');
      setText('');
    } else {
      Alert.alert('thanks');
      dispatch(getAddress(text));
      setText('');
      navigation.navigate('Main');
    }
  };
  return (
      <TextInput
        placeholderStyle={styles.input}
        placeholder="your address"
        onChangeText={text => setText(text)}
      />
      <TouchableOpacity style={styles.button} onPress={handlePress}>

提前致谢！！！

【问题讨论】：

标签： javascript react-native react-redux redux-toolkit

【解决方案1】：

您的查询端点无法访问状态，也不应该这样做。 RTK-Q 确定当挂钩的输入发生变化时应该发出新请求 - 在您的情况下，输入不会发生变化，因此永远不会发出新请求。

像这样使用它：

const address = useSelector(state => state.address.address)
const result = useGetElectedByAddressQuert(address)

【讨论】：