用redux实现搜索栏-不确定如何格式化操作和简化器

问题描述

我正在尝试在我的资源页面上实现搜索栏，以便用户可以按名称搜索资源。我不确定从哪里开始执行搜索栏的操作。例如，是否需要将其包含在资源缩减器中或为搜索创建一个全新的缩减器？另外，我正在使用react native-我该如何在组件中进行事件处理（我不确定如何访问nativeEvent或什至有必要）？如果没有redux，只会在onChangeText中设置setState，但是等同于redux呢？我对redux还是比较陌生，所以可以提供任何帮助，谢谢！

以下是我的动作：

export const fetchResources = () => {
  return (dispatch) => {
    fetch('http://localhost:3000/resources')
    .then(response => {return response.json()})
    .then(resource => {
      dispatch(setResources(resource))
      })  
  }
}

export function setResources(resourceData) {
  return {
    type: "SET_ALL_RESOURCES",resources: resourceData
  }
}

还有我的减速器：

const resourceReducer = (state = {resources: []},action) => {

  switch(action.type){
    case "SET_ALL_RESOURCES": 
      return {
        ...state,resources: action.resources
      }
    case "ADD_RESOURCES":
      let copyOfResources = [...state.resources,action.resources]
      return {
        ...state,resources: copyOfResources
      }
    default: 
      return state
  }
}

这是我的资源屏幕：

import React from 'react';
import { StyleSheet,Text,View,FlatList,TouchableOpacity,Button,NativeEventEmitter} from 'react-native';
import {connect} from 'react-redux';
import {fetchResources} from '../actions';
import { addUserResource } from '../actions'
import {SearchBar} from 'react-native-elements';

class ResourcesScreen extends React.Component {

  componentDidMount = () =>{
    this.props.fetchResources();
  }

  FlatListItemSeparator = () => {
    return (
      <View
        style={{
          height: 0.5,width: "100%",backgroundColor: "lightblue",}}
      />
    );
  }

  handlePress(item) {
    fetch('http://localhost:3000/user_resources',{
          method: 'POST',headers: {
              'Content-Type': 'application/json',Accept: 'application/json'
          },body: JSON.stringify({
              resource_id: item,user_id: this.props.users.id
          })
      })
          .then(res => res.json())
          .then(data2 => {
            console.log(data2)
              this.props.addUserResource(data2)
              console.log(this.props)
          })
  }

  header = () => {
  return <View>
  <Text style={styles.header}>Hello,{this.props.users.name}</Text>
      </View>
  }
 
  render(){
   let array = this.props.resourceName.map(name => {
      if (name.topic_id === this.props.route.params.topicId)
      return name})
    let anoda = array.filter(x => x !== undefined)
     return(
       <>
       <SearchBar placeholder="enter something here" />
      <Button title="Add A New Resource" onPress={() => this.props.navigation.navigate('Add A New Resource',{topicId:this.props.route.params.topicId})} style={styles.listitem} />
      <FlatList style={styles.flatlist} keyExtractor={(item)=> item.id.toString()} data={anoda} ItemSeparatorComponent = { this.FlatListItemSeparator } renderItem={({item}) => {
      return <View><TouchableOpacity><Text onPress={() => this.props.navigation.navigate('Add A New Resource',{topicId:item.id})} style={styles.listitem}>{item.name}</Text><Button title="working?" onPress={()=>this.handlePress(item.id)}/></TouchableOpacity>
      </View>}}
      ListHeaderComponent = {this.header}/>
      </>
     )
   }
}

  const styles = StyleSheet.create({
    flatlist: {
      flex:1
    },listitem: {
      flexGrow: 0,flex:1,minHeight: 109,paddingTop: 45,textAlign: 'center',justifyContent:"center",backgroundColor:"black",fontSize: 20,color: 'white'
      },header : {
      backgroundColor: 'lightblue',padding: 20,fontWeight: 'bold'
    }
  })

  

     const mapStateToProps = (state) => {
      return {
        resourceName: state.resourceReducer.resources,users: state.userReducer,}
    }

    const mapDispatchToProps = (dispatch) => {
      return {
        fetchResources: () => dispatch(fetchResources()),addUserResource,}
    }


export default connect(mapStateToProps,mapDispatchToProps)(ResourcesScreen)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）