如何使用Redux更新状态

How to update state using Redux?

本文关键字：状态 更新 Redux 何使用      更新时间：2023-11-26

我正在使用此入门套件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？这是正确的想法吗？

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

const mapStateToProps = (state) => ({
     search: { city: state.search }
});
export default connect((mapStateToProps), {
  searchListing
})(HomeView);

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

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

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

import { searchListing } from '../../redux/modules/search';
const mapDispatchToProps = (dispatch) => ({
    searchListing: () => {
        dispatch(searchListing());
    }
});
export default connect(mapStateToProps, mapDispatchToProps)(HomeView);

然后，您已经将函数设置为道具，并将其与searchListing一起使用。

相关文章：