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

Posted 2023-02-19

【中文标题】从 React Native Text Input 向 Redux Toolkit 的 createApi 添加动态数据？

【英文标题】：Adding dynamic data to Redux Toolkit's createApi from React Native Text Input?

【发布时间】：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>

提前致谢！！！

【参考方案1】：

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

像这样使用它：

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