无法访问 util 文件中的调度方法：反应原生答案

【问题标题】：cannot access dispatch method in a util file: react native无法访问 util 文件中的调度方法：反应原生
【发布时间】：2020-09-24 05:09:22
【问题描述】：

我有一个 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,
  };
}

我的文件对调度方法一无所知。为什么这样？我是不是在 App 级别配置了错误？

我的 index.tsx：

import React from 'react';
import App from './App';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware, compose} from 'redux';
import {rootReducer} from './redux';
import thunk from 'redux-thunk';

export default class Root extends React.Component {
  public render() {
    const store = createStore(rootReducer, applyMiddleware(thunk));
    return (
      <Provider store={store}>
        <App />
      </Provider>
    );
  }

我的 App.tsx 看起来像：

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;

如何使用 useDecoder 中的调度功能？

【问题讨论】：

dispatch 不是全局函数。您必须将其提供给decoder。使用异步 redux 操作。

标签： reactjs react-native redux react-redux redux-thunk

【解决方案1】：

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

async-action-creators

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);
    });
};

【讨论】：

谢谢先生 :) 这很有魅力。或者我用了一个钩子。使用调度！
@Ackman 我真的很惊讶它的工作原理，因为看起来decoder 不是一个反应组件，也没有使用反应挂钩命名约定，尽管你将文件命名为useDecoder。跨度>
是的，我猜这个钩子可以从 App 组件的任何地方获取引用。

【解决方案2】：

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,
  };
}

【讨论】：