如何解决用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 举报,一经查实,本站将立刻删除。