3

I am rendering data (having it in my redux store), I have a search bar and want to filter the data results based on the search input. I am using reselect library and cant seem to make it work. I read their documentation and Ive tried various things:

I store the search input in my local state and want to pass it in as an argument, however it only seems to work for props which I dont have (as Im saving input in state of comp.) Then I tried to call my selector function in my onChange function, passing in the input --> problem here is, Im receiving the input, but not the data.

Could someone help?

selector.js

import {createSelector} from 'reselect'

const dataSelector = (state, props) => {
    return state.data;
}

export const filterResults = (data, input) => {
    return createSelector(
        dataSelector,
        data => data.filter((item) => item.symbol.toLowerCase().includes(input) || item.name.toLowerCase().includes(input))
    )
}

Container:

class App extends React.Component {
constructor(props){
    super(props);
    this.state = {
        searchInput: ""
    }
}

filterData = (e)=> {
    const input = e:
    this.setState({
        searchInput:input
    })
}

render (){
    ...
    this.props.products.data.map((item, index) =>...
    ...
    <input
    onChange={this.filterData}
    />
 }

}

function mapStateToProps(state, props) {
    return {
        products: state.data,
        filteredData: filterResults(state,this.state.input)
    }
}

export default connect(mapStateToProps, { actioncreator })(App)

UPDATE:

I changed code and now store the input in my redux store. I call my actioncreator inside my onChange function which returns (only) the input, my (input)reducer is is also returned inside my mapstatetoprops function.

selector:

import {createSelector} from 'reselect'

const selectedData = state => state.data;
const input = state => state.searchFilter.searchInput;

const getData = (data, searchInput) => {
    return data.filter((item) => item.name.toLowerCase().includes(searchInput))
}

export default createSelector(
    selectedData,
    input,
    getData
)

In my container, I changed my mapStateToProps to:

import selectedData from ...

function mapStateToProps(state) {
    return {
        products: state.data,
        searchFilter: state.searchFilter,
        selected: selectedData(state)
    }
}

Problem:

  • Im getting the error: canno filter null - however I when I console log data inside my getData function- I DO get an array full of objects so its not null

  • Also I tested my action creator for the input and it works, however insight input function (in my selector file) its undefined - which should actually an empty string at first as thats the initial value in my reducer..

javascript2016
  • 973
  • 3
  • 17
  • 41

1 Answers1

0

The reason your mapStateToProps isn't called on input, is because it's only called when the redux store is updated. I would suggest you store the search input state in the redux store to be able to rerun mapStateToProps and your selector on change.

tskjetne
  • 2,264
  • 1
  • 8
  • 10
  • So I updated my question. I tried to do what you suggested but its not really working as well. Any idea what Im doing wrong? Thank you – javascript2016 Apr 17 '18 at 18:56
  • It's difficult to understand your issue when you're not providing all the relevant code. And your error message "canno filter null" isn't complete, we need to know more about what that error message says. Please provide relevant code for the updated component, selector, reducer, action creator etc. We need to see how it all is tied together. – tskjetne Apr 18 '18 at 19:24