重新选择选择器功能未执行答案

【问题标题】：Reselect selector function not executing重新选择选择器功能未执行
【发布时间】：2017-05-10 06:48:48
【问题描述】：

我正在尝试使用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',
  }
})

【问题讨论】：

标签： javascript redux react-redux reselect

【解决方案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 中实例化选择器。

【讨论】：

啊，我现在明白了。我确实摆脱了工厂。谢谢！