フィルターアプリケーションではレデューサーが呼び出されていません

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 

    } 
} 

検索リデューサー

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

あなたは間違って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で使用します。これにより、実際の検索機能を呼び出すだけです。また、マップされたアクションがインポートと同じ名前を共有していないことを確認する必要があります。あなたはまた、間違った場所にあなたの派遣を持っているようです。あなたのSearch.jsコンポーネントで

export default connect(
    null, 
    mapDispatchToProps 
) (Search)