在过滤器应用程序反应中未调用减速器

Question

我正在尝试在此SO帖子的帮助下创建搜索/过滤器应用程序。 但是，我检查了日志，在我的操作搜索操作触发后，我的化简器没有被调用。我也注册了一个联合减速器。我可能以愚蠢的方式做错了什么，但我没有得到什么？请让我知道我应该采用以下方法还是应该使用类/状态方法

这是我的搜索容器

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)

搜索.js

import React from "react"
import Select from "react-select"
import {connect} from "react-redux"
import {bindActionCreators} from 'redux';
import {search} from "../action/SearchAction"
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(
mapDispatchToProps
// mapStateToProps
) (Search)

搜索行动

import names from "../api/nameList.js"

export function search (value) {
console.log("search triggere",value)
return {
type:"SEARCH",
payload:value
}
}

搜索减少器

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;
}
} 

Answer 1

在您的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)

Answer 2

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

您似乎已注释掉搜索，但是您在下一行的onKeyUp中使用它。这将导致您只调用实际的搜索函数。还应确保映射的操作不与导入共享相同的名称。您的调度似乎也放在了错误的位置。

export default connect(
null,
mapDispatchToProps
) (Search)