Question

我是React，Redux和JS的新手。我想知道如何在组件中链接动作？在列表屏幕上，我的应用程序检索用户的地理位置，然后使用当前的long和lat获取api url。

我已经超时了。但我认为这是一种危险的方式。

import {
  aFetch,
  aGetPosition,
} from '../../actions';

import { API_URL } from '../../config/ApiEndpoints';

class App extends Component {
  componentDidMount() {
    this.props.aGetPosition();
    setTimeout(() => {
      const { latitude, longitude } = this.props.position.data.coords;
      const url = `${API_URL}=${latitude},${longitude}`;

      this.props.aFetch(url);
    }, 1000);
  }

  render(){...}
}

const mapStateToProps = (state) => {
  return {
    position: state.position,
    items: state.items,
  };
};

export default connect(mapStateToProps, { aFetch, aGetPosition })(App);

可以使用.then（）或类似的东西吗？

Answer 1

我相信你需要方法componentWillReceiveProps()。 docs提供了关于它和组件生命周期中的其他方法的良好解释。

Answer 2

首先，您需要发送您的redux操作。这可以通过使用mapDispatchToProps函数来实现，该函数将是connect函数中的第二个参数（而不是具有您的操作的普通对象，这是您现在拥有的）。有关在React容器中实施redux的文档，包括从容器中调度操作：http://redux.js.org/docs/basics/UsageWithReact.html#implementing-container-components

要处理异步操作和链接操作，您可能希望使用中间件来帮助您，例如redux-thunk。文档链接：http://redux.js.org/docs/advanced/AsyncActions.html#async-action-creators（我建议阅读整个页面，但链接将直接转到redux-thunk部分。）

如何在Redux和React中链接动作？

2 个答案: