如何通过redux获取页面加载的新数据?

时间:2017-11-02 19:21:40

标签: reactjs redux

在我的本机应用程序中,我有3个主要视图, 列表视图,这是一个项目数组。 详细信息视图,显示当前选定的项目。

enter image description here

下面是关于如何生成列表视图的示例代码,

  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,但我不知道如何实现。

0 个答案:

没有答案