CODEWITHSUNDEEP
reactjsreact-redux
LowCool
LowCool

Reputation: 1411

reducer is not being called in filter application react

I am trying to create search/filter application with help of this SO post. however, I checked logs my reducers is not being called after my action search action triggered. I have registered that one combine reducers also. May I have done something wrong in foolish way but I am not getting what? and please let me know should I go with my below approach or should I use class/state approach

Here is my search container

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

}

Upvotes: 0

Views: 88

Answers (2)

Ramzi C.
Ramzi C.

Reputation: 1731

const Search = () => {
   // const {search,value} = this.props

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

You seem to have search commented out, but you use it in onKeyUp on the next lines. This would cause you to just call the actual search function. You should also make sure the mapped action does not share the same name as the import. You also seem to have your dispatch in the wrong spot.

export default connect(
    null,
    mapDispatchToProps
) (Search)

Upvotes: 0

Danny Delott
Danny Delott

Reputation: 6988

In your Search.js component, it looks like you are using connect incorrectly.

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)

Upvotes: 1

Related Questions