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)

这就是我被困住的地方，我试图从repo中获取模式，他们只是通过1，我认为无论何时创建动作，逻辑只是添加1没有从组件传递新信息。

我想要完成的是将搜索输入到表单中，然后从组件中将用户查询传递给操作有效负载，然后是reducer，然后使用查询更新新状态。我希望这是正确的想法。

因此，如果在示例中value的{{1}}被硬编码并传递到1方法，我该如何制作它以便我更新connect()组件动态？这甚至是正确的想法吗？

Answer 1

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

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

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

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

然后，您已将该函数设为prop，将其与searchListing一起使用。

Answer 2

你几乎做对了。只需修改connect函数即可直接传递要调用的操作：

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

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

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

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

如何使用Redux更新状态？

2 个答案: