CODEWITHSUNDEEP
javascriptreduxreact-reduxreselect
BeniaminoBaggins
BeniaminoBaggins

Reputation: 12503

Reselect selector function not executing

I'm trying to use reselect to select if a form is valid but the function that selects the validity never runs:

import { createSelector } from 'reselect'
import { getSelectedItems } from '../categories/Categories'

const categoriesSelector = state => state.get('searchForm').get('categories')
const placeSelector = state => state.get('searchForm').get('location').place

export const makeSelectIsValid = () => createSelector(
  categoriesSelector,placeSelector,
  (categories,place) => getSelectedItems(categories).length > 0 && place !== {}
)

I import it into a component and try to use it in a pre-existing mapStateToProps:

import { makeSelectIsValid } from './searchFormIsValid.selector'

const mapStateToProps = (state) => ({
  isMenuOpen: state.get('searchPage').get('isMenuOpen'),
  searchFormIsValid: makeSelectIsValid()
})

And I try to at this stage just display the value:

<Title style={styles.title}>{props.searchFormIsValid.toString()}</Title>

But what gets displayed is a function turned into a string.

Where am I going wrong?

Here is the whole component that uses it just in case it is relevant:

import { ScrollView, StyleSheet, View } from 'react-native'
import {
  Container,
  Button,
  Text,
  Header,
  Body,
  Right,
  Left,
  Title
} from 'native-base'
import React from 'react'
import Keywords from '../keywords/Keywords'
import Categories from '../categories/Categories'
import Location from '../location/Location'
import DistanceSlider from '../distanceSlider/DistanceSlider'
import Map from '../map/Map'
import Drawer from 'react-native-drawer'
import { connect } from 'react-redux'
import { toggleMenu } from './searchPage.action'
import { styles } from '../../style'
import searchPageStyle from './style'
import { makeSelectIsValid } from './searchFormIsValid.selector'

const mapStateToProps = (state) => ({
  isMenuOpen: state.get('searchPage').get('isMenuOpen'),
  searchFormIsValid: makeSelectIsValid()
})

const mapDispatchToProps = (dispatch) => ({
  toggleMenu: () => {
    dispatch(toggleMenu())
  }
})

let SearchPage = (props) => {
  const menu = (
    <Container>
      <Header style={styles.header}>
        <Left>
          <Button transparent>
          </Button>
        </Left>
        <Body>
          <Title style={styles.title}>Search{/*props.searchFormIsValid.toString()*/}</Title>
        </Body>
        <Right>
        </Right>
      </Header>
      <Container style={styles.container}>
        <ScrollView keyboardShouldPersistTaps={true}>
          <Categories />
          <View style={searchPageStyle.locationContainer}>
            <Location />
          </View>
          <DistanceSlider />
          <Keywords />
          <Button 
            block 
            style={searchPageStyle.goButton} 
            //disabled={!props.searchFormIsValid}
            onPress={props.toggleMenu}>
            <Text>GO</Text>
          </Button>
        </ScrollView>
      </Container>
    </Container>
  )
  return (
    <Drawer open={props.isMenuOpen} content={menu}>
      <Container style={mapStyles.container}>
        <Map />
      </Container>
    </Drawer>
  )
}
SearchPage.propTypes = {
  toggleMenu: React.PropTypes.func.isRequired,
  isMenuOpen: React.PropTypes.bool.isRequired,
  searchFormIsValid: React.PropTypes.bool.isRequired
}

SearchPage = connect(
  mapStateToProps,
  mapDispatchToProps
)(SearchPage)

export default SearchPage

const mapStyles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  }
})

Upvotes: 0

Views: 947

Answers (1)

Andrea Carraro
Andrea Carraro

Reputation: 10489

Since makeSelectIsValid is a selector factory, it should be used like this:

import { makeSelectIsValid } from './searchFormIsValid.selector'

const mapStateToProps = (state) => {
  // Make a selector instance
  const getSelectIsValid = makeSelectIsValid();

  return {
    isMenuOpen: state.get('searchPage').get('isMenuOpen'),
    searchFormIsValid: getSelectIsValid(state)
  };
}

Extra consideration: given your scenario, the selector factory is unnecessary, since you might directly expose getSelectIsValid selector avoiding selector instantiation in mapStateToProps.

Upvotes: 2

Related Questions