Reactjs 未在筛选器应用程序中调用reducer

我正试图在这篇文章的帮助下创建搜索/过滤应用程序。但是，我检查了日志，在触发操作搜索操作后，没有调用我的还原程序。我还注册了一个联合收割机减速机。我可能愚蠢地做了错事，但我没有得到什么？请让我知道我应该使用下面的方法还是使用类/状态方法

这是我的搜索容器

import Search from "../components/Search"
import React from "react"
import {connect} from "react-redux"

const SearchContainer = () =>(
    <Search/>
)
const mapStateToProps= state => {
    console.log("state",state)
    return{
    results:state.searchResult.values
    }
}
export default connect(
    mapStateToProps
) (SearchContainer)

搜索减速器

import * as intialState from "../api/names.json"
const intialValues = {names:['vihag','pratixa','saisunnel','eshwaran'],values:[]}
export default function reducer(
    state=intialValues,
    action){
    console.log("search reducer")
    switch(action.type){
        case "SEARCH":{
         const values=state.names.filter(val => val.includes(action.payload))
         const newState={...state,values};
         console.log("new search state",newState)
         return newState
        }
    default:
        return state;
    }

} 

---

在您的

Search.js

组件中，您似乎没有正确使用

connect

const Search = () => {
  const {search,value} = this.props
  return (
    <div>
        <input name="search"  id="searchbutton" onKeyUp={(event) => search(event.target.value)}></input>
     </div>
  )
}

const mapDispatchToProps = (dispatch) => (
  bindActionCreators({search},dispatch)
)

export default connect(
  undefined, // mapState to props is always the first argument
  mapDispatchToProps,
)(Search)

const Search=（）=>{
const{search，value}=this.props
返回(
搜索（event.target.value）}>
)
}
const mapDispatchToProps=（调度）=>(
bindActionCreators（{search}，dispatch）
)
导出默认连接(
未定义，//mapState to props始终是第一个参数
mapDispatchToProps，
)（搜索）

import * as intialState from "../api/names.json"
const intialValues = {names:['vihag','pratixa','saisunnel','eshwaran'],values:[]}
export default function reducer(
    state=intialValues,
    action){
    console.log("search reducer")
    switch(action.type){
        case "SEARCH":{
         const values=state.names.filter(val => val.includes(action.payload))
         const newState={...state,values};
         console.log("new search state",newState)
         return newState
        }
    default:
        return state;
    }

} 

const Search = () => {
   // const {search,value} = this.props

    return (
    <div>
        <input name="search"  id="searchbutton" onKeyUp={(event) => search(event.target.value)}></input>
     </div>
    )
}

export default connect(
    null,
    mapDispatchToProps
) (Search)

const Search = () => {
  const {search,value} = this.props
  return (
    <div>
        <input name="search"  id="searchbutton" onKeyUp={(event) => search(event.target.value)}></input>
     </div>
  )
}

const mapDispatchToProps = (dispatch) => (
  bindActionCreators({search},dispatch)
)

export default connect(
  undefined, // mapState to props is always the first argument
  mapDispatchToProps,
)(Search)