无法访问 util 文件中的调度方法：本机反应

Question

我有一个 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 中的调度功能？

Answer 1

假设您 setup/configured 您的商店带有 redux-thunk 中间件，并且正确地将 app/component 连接到商店，那么您的动作创建者只需要 return 顶部接收 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);
    });
};

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

无法访问 util 文件中的调度方法：本机反应

cannot access dispatch method in a util file: react native

reactjs

react-native

redux

redux-thunk

react-redux