在React js中使用Redux连接API结果

Question

我有一个搜索表单，可从api获取数据。这是我第一次使用Redux，请原谅我的无知。

我可以在边栏中显示搜索结果，而无需使用redux store。

  handleSubmit(event) {
    event.preventDefault()
    get(`api1`, { maxContentLength: 400 })
    .then((res) => {
        this.setState({SearchItems: res.data})
    })
  }

Answer 1

有几个步骤 您可以手动使用以下来自redux'

的对象存储方法

下面的方法将动作分配给减速器

1. store.dispatch({type: 'GET_RESULTS' , payload: {}})

2. store.subscribe将收到所有操作，您可以在此处注册回调。

3. store.getState()使用此方法可以访问当前状态

您可以在https://redux.js.org/basics/store上找到完整的文档和示例，关于redux的示例在redux with react

对于react应用程序，您可以使用react-redux软件包将Provider组件附带的具有store属性的redux集成

通过此操作，您可以将全局存储对象导入要创建应用程序组件的index.js文件中。

现在已设置了提供程序组件，您可以使用

然后在react组件内部使用Connect high order组件集成redux动作以对react组件进行集成。 Connect接受两个函数mapStateToProps和mapDispatchToProps函数作为参数，并返回将您的react组件传递给的高阶组件。

mapStateToProps的功能是它的名称，它接受全局状态并返回具有属性的对象，然后可以从props进行访问，而mapDispatchToProps同样接受props的调度程序。以下是使用react-redux与redux集成的react组件的示例。

这是视频教程react-redux video