Javascript 重新选择选择器功能未执行_Javascript_Redux_React Redux_Reselect

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

javascript redux

Javascript 重新选择选择器功能未执行,javascript,redux,react-redux,reselect,Javascript,Redux,React Redux,Reselect,我试图使用来选择表单是否有效，但选择有效性的函数从未运行： import { createSelector } from 'reselect' import { getSelectedItems } from '../categories/Categories' const categoriesSelector = state => state.get('searchForm').get('categories') const placeSelector = state => st

我试图使用来选择表单是否有效，但选择有效性的函数从未运行：

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

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

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

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

由于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选择器，从而避免在MapStateTrops中进行选择器实例化。

由于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选择器，从而避免在MapStateTrops中实例化选择器。

Ahhh我现在明白了。我确实把这家工厂处理掉了。谢谢啊，我现在明白了。我确实把这家工厂处理掉了。谢谢