如何使用Redux更新状态？

Question

我正在使用这个入门套件https://github.com/davezuko/react-redux-starter-kit，同时在跟随一些教程学习，但是这个代码库的风格比我正在观看的教程略微先进/不同。我只是有一个小问题感到有些困惑。 HomeView.js-这只是一个在路由器中使用的视图，还有其他高级组件，如Root，我认为我不需要分享那个，如果需要请告诉我，但所有内容都在上面提供的Github链接中。

import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { searchListing } from '../../redux/modules/search'

export class HomeView extends React.Component {

  componentDidMount () {
    console.log(this.props)
  }

  render () {
    return (
      <main onClick={this.props.searchListing}>
        <NavBar search={this.props.search} />
        <Hero/>
        <FilterBar/>
        <Listings/>
        <Footer/>
      </main>
    )
  }
}

我正在使用connect()，并传递mapStateToProps参数，以便将状态信息传递给HomeView组件。我还告诉它我的searchListing函数是一个返回类型和有效负载的操作。

export const searchListing = (value) => {
    console.log(value)
    return {
        type: SEARCH_LISTINGS,
        payload: value
    }
}

显然，当我在connect()内调用该方法时，我会传递一个空对象：searchListing: () => searchListing({})。

const mapStateToProps = (state) => {
  return {
    search: { city: state.search }
  }
}

export default connect((mapStateToProps), { searchListing: () => searchListing({}) })(HomeView)

这是我的瓶颈，我正试图使用仓库中的模式，它们只传递了1。我认为，每次创建动作时，逻辑都只是添加1，没有从组件传递新信息。

我想做的是在表单中输入搜索内容，并从组件将用户查询传递到操作负载载荷，然后传递到reducer，最后用查询更新新状态。 我希望这是正确的想法。

因此，如果在示例中1的value是硬编码并传递到connect()方法中，那么我如何使其动态地从组件更新value呢？ 这是否是正确的思路？

- Michael Joseph Aubry

---

我开始慢慢理解了 :) - Michael Joseph Aubry

Answer 1

如果需要调用一个函数方法，请使用dispatch。

import { searchListing } from '../../redux/modules/search';

const mapDispatchToProps = (dispatch) => ({
    searchListing: () => {
        dispatch(searchListing());
    }
});

export default connect(mapStateToProps, mapDispatchToProps)(HomeView);

然后，您已经将该函数作为属性，使用它与 searchListing 结合使用。

- Kai Hao

Answer 2

你差不多做对了。只需要修改connect函数，直接传递你想要调用的动作即可：

const mapStateToProps = (state) => ({
     search: { city: state.search }
});

export default connect((mapStateToProps), {
  searchListing
})(HomeView);

然后，您可以使用此操作：this.props.searchListing(stringToSearch)，其中stringToSearch是包含输入值的变量。

注意：您似乎目前没有检索用户查询。您可能需要先检索它，然后将其传递给searchListing操作。

- Harijoe