我试图在此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)
Search.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)
SearchActioN
import names from "../api/nameList.js"
export function search (value) {
console.log("search triggere",value)
return {
type:"SEARCH",
payload:value
}
}
SearchReducer
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;
}
}