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)

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

}

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)

在过滤器应用程序中没有调用reducer

2 个答案: