Question

我正在尝试使用reselect来选择表单是否有效但是选择有效性的函数永远不会运行：

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 !== {}
)

我将其导入组件并尝试在预先存在的mapStateToProps中使用它：

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

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

我试着在这个阶段只显示值：

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

但显示的是一个变成字符串的函数。

我哪里错了？

以下是使用它的整个组件，只要它是相关的：

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',
  }
})

Answer 1

由于makeSelectIsValid是选择器工厂，因此应该像这样使用：

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

额外考虑： 根据您的方案，选择器工厂是不必要的，因为您可以直接公开getSelectIsValid选择器，避免mapStateToProps中的选择器实例化

重新选择未执行的选择器功能

1 个答案: