2017-07-19 60 views
0

我试图在此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; 
    } 

} 

回答

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) 
0
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) 
相关问题