在我的本机应用程序中,我有3个主要视图, 列表视图,这是一个项目数组。 详细信息视图,显示当前选定的项目。
下面是关于如何生成列表视图的示例代码,
return (
<FlatList
data={this.props.studentList}
renderItem={({ item }) => (
<ListItem onPress={()=> this.handleonPress( navigate, item ) }
roundAvatar
title={`${item.agent_name} `}
subtitle={`${item.address}, ${item.city}`}
style={styles.row_alternate}
containerStyle={{ borderBottomWidth: 0 }}
/>
)}
keyExtractor={item => item._id}
ItemSeparatorComponent={this.renderSeparator}
ListHeaderComponent={this.renderHeader}
ListFooterComponent={this.renderFooter}
onRefresh={this.handleRefresh}
refreshing={this.state.refreshing}
onEndReached={this.handleLoadMore}
onEndReachedThreshold={50}
/>
);
}
这里使用mapstate to props来生成数据:
const mapStateToProps = state => {
const properties = _.map(state.studentdata, (val, uid ) => {
return { ...val, uid };
});
return { properties };
};
继承人减少召唤
import {
STUDENT_DATA_FETCH_SUCCESS
} from '../actions/types';
// inital state will have object for list of properties
const INITIAL_STATE = { };
export default ( state = INITIAL_STATE, action) => {
switch (action.type) {
case STUDENT_DATA_FETCH_SUCCESS:
console.log(' - case STUDENT_DATA_FETCH_SUCCESS = action => =');
return action.payload;
default:
return state;
}
}
但问题是,当我单击列表视图上的项目时,它会将项目传递到“详细信息”视图,并显示传递给“详细信息”视图的项目数据。
Redux实施:
从'../ actions / types'导入{STUDENT_UPDATE,STUDENT_CREATE,STUDENTS_SAVE_SUCCESS,SINGLE_STUDENT_FETCH_SUCCESS};
const INITIAL_STATE = {
name : '',
address : '',
cell : '',
_id : '',
phone : '',
comments : ''
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case STUDENT_FETCH_SUCCESS:
return action.payload;
// return { ...state, state }
case STUDENT_UPDATE:
// console.log('21 - case PROPERTY_UPDATE action => ', action);
return { ...state, [action.payload.prop]: action.payload.value }
case STUDENT_CREATE:
return INITIAL_STATE;
case STUDENTS_SAVE_SUCCESS:
return INITIAL_STATE
default:
return state;
}
};
但是我担心的是我希望应用程序从数据库中获取最新数据,因此我想在用户从列表视图转到详细信息视图时只传输项目的ID,在页面上加载它应该获取通过redux使用id的新数据。
但我的问题是我不知道如何使用redux来获取新数据。
我尝试通过redux实现single_student_fetch,但我还没有成功。
import {
SINGLE_STUDENT_FETCH_SUCCESS
} from '../actions/types';
// inital state will have object for list of properties
// const INITIAL_STATE = { };
const INITIAL_STATE = {
agent_name : '',
address : '',
cell : '',
_id : '',
phone : '',
comments : ''
};
export default ( state = INITIAL_STATE, action) => {
switch (action.type) {
case SINGLE_STUDENT_FETCH_SUCCESS:
return action.payload;
default:
return state;
}
}
我在线阅读使用mapDispatchToProps,但我不知道如何实现。