Reactjs 无法访问util文件中的分派方法：react native

我有一个util/usedecoder.ts文件，它看起来像：

import axios from 'axios';

export const decoder = ({latitude, longitude}: any) => {
  const url =
    'https://api.opencagedata.com/geocode/v1/json?q=' +
    latitude +
    '+' +
    longitude +
    '&key=########';

  axios
    .get(url)
    .then(function (response: any) {
      const timestamp = response.data.timestamp.created_http;
      const address = response.data.results.filter((data: any) => data.confidence > 8)[0].formatted;
      return {timestamp, address};
    })
    .then((data) => {
      console.log(data);
      dispatch(addLocation(data)); <-------- Not working
    })
    .catch(function (error: string) {
      console.log(error);
    });
};

export function addLocation(data: any) {
  return {
    type: 'ADD_LOCATION',
    data: data,
  };
}

import {useGeolocation} from './utils/useGeolocation';
import {decoder} from './utils/useDecoder';
import Home from './screens/Home';
import * as React from 'react';
const App = () => {
  const geoLocation = useGeolocation();
  decoder(geoLocation[1]);
  return <Home />;
};

export default App;

从“axios”导入axios；
导出常量解码器=（{纬度，经度}：任意）=>{
常量url=
'https://api.opencagedata.com/geocode/v1/json?q=' +
纬度+
'+' +
经度+
“&key=############”；
axios
.get（url）
.然后（功能（响应：任意）{
const timestamp=response.data.timestamp.created_http；
const address=response.data.results.filter（（数据：any）=>data.confidence>8）[0]。已格式化；
返回{时间戳，地址}；
})
。然后（（数据）=>{
控制台日志（数据）；
调度（添加位置（数据））{
const geoLocation=useGeolocation（）；
解码器（地理定位[1]）；
返回；
};
导出默认应用程序；

---

如何使用useDecoder中的dispatch功能？

假设您已使用redux thunk中间件设置/配置了应用商店，并将应用程序/组件正确连接到应用商店，则您的操作创建者只需返回接收dispatch属性的顶级函数即可

export const decoder=（{纬度，经度}:any）=>dispatch=>{//data.confidence>8）[0]。格式化；
返回{时间戳，地址}；
})
。然后（（数据）=>{
控制台日志（数据）；
dispatch（addLocation（data））；//
dispatch
不是一个全局函数。您必须将它提供给
解码器
。使用异步redux操作。谢谢先生：）这很有魅力。或者，我使用了一个hook.useDispatch！@Ackman我真的很惊讶，因为
decoder
似乎不是react组件，也没有使用react hook命名约定，尽管您将文件命名为
usedcoder
。是的，该hook能够从a中的任何位置获取引用我想是pp成分吧。
import {useGeolocation} from './utils/useGeolocation';
import {decoder} from './utils/useDecoder';
import Home from './screens/Home';
import * as React from 'react';
const App = () => {
  const geoLocation = useGeolocation();
  decoder(geoLocation[1]);
  return <Home />;
};

export default App;

export const decoder = ({latitude, longitude}: any) => dispatch => { // <-- return a function with dispatch as parameter

  const url =
    'https://api.opencagedata.com/geocode/v1/json?q=' +
    latitude +
    '+' +
    longitude +
    '&key=########';

  axios
    .get(url)
    .then(function (response: any) {
      const timestamp = response.data.timestamp.created_http;
      const address = response.data.results.filter((data: any) => data.confidence > 8)[0].formatted;
      return {timestamp, address};
    })
    .then((data) => {
      console.log(data);
      dispatch(addLocation(data)); // <-- can now dispatch
    })
    .catch(function (error: string) {
      console.log(error);
    });
};

I solved it by using a hook:

import axios from 'axios';
import {useDispatch} from 'react-redux'; ----> 

export const decoder = ({latitude, longitude}: any) => {
  const dispatch = useDispatch();

  const url =
    'https://api.opencagedata.com/geocode/v1/json?q=' +
    latitude +
    '+' +
    longitude +
    '&key=30eb4ee11aeb43848e1db3a7056ad91f';

  axios
    .get(url)
    .then(function (response: any) {
      const timestamp = response.data.timestamp.created_http;
      const address = response.data.results.filter((data: any) => data.confidence > 8)[0].formatted;
      return {timestamp, address};
    })
    .then((data) => {
      dispatch(addLocation(data));
    })
    .catch(function (error: string) {
      console.log(error);
    });
};

export function addLocation(data: any) {
  return {
    type: 'ADD_LOCATION',
    data: data,
  };
}