Question

我正在使用redux来存储和从Firebase获取数据。数据已成功存储，但视图MyActivities未使用新数据更新。我在这里做错了吗？

我需要重新渲染整个应用程序，以便使用存储在Firebase中的新数据更新视图。

我没有添加此示例中使用的所有代码。

ActivitiesAction.js

    import firebase from 'firebase';
import { Navigation } from 'react-native-navigation';
import {
  ACTIVITIES_FETCH_SUCCESS,
  ACTIVITIES_SEND_SUCCESS,
  SUBACTIVITY_SEND_SUCCESS
} from './types';

export const activitiesFetch = () => {

  return (dispatch) => {
    firebase.database().ref('users_data/s80GnOQu22W4XLLYbuKUBC2BzkY2/').once('value')
      .then((snapshot) => {
        dispatch({
          type: ACTIVITIES_FETCH_SUCCESS,
          payload: snapshot.val()
        });
      });
  };
};

export const activitiesSend = (activityDescription,
  activityDate, category, notification, alarm) => {

  const ref = firebase.database()
  .ref('users_data/s80GnOQu22W4XLLYbuKUBC2BzkY2/activities/cheduled_activities');
  const activity = ref.push();
  const ref2 = firebase.database()
  .ref('users_data/s80GnOQu22W4XLLYbuKUBC2BzkY2/activities/all_activities');
  const activityList = ref2.push();
  return (dispatch) => {
    activity.set({
      activityDescription,
      activityDate,
      category,
      // time: this.state.time,
      notification,
      alarm
    }).then(activityCreated => {
      dispatch({ type: ACTIVITIES_SEND_SUCCESS, payload: activityCreated });

      activityList.set({
        activityDescription,
        category
      }).then(listActivity => {
        dispatch({ type: SUBACTIVITY_SEND_SUCCESS, payload: listActivity });
      });
    });
  };
};

ActivitiesReducer.js

    import {
  ACTIVITIES_FETCH_SUCCESS,
  ACTIVITIES_SEND_SUCCESS,
  SUBACTIVITY_SEND_SUCCESS
} from '../actions/types';

const INITIAL_STATE = { activitiesData: '', activityCreated: null, listActivity: null };

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case ACTIVITIES_FETCH_SUCCESS:
      return { ...state, activitiesData: action.payload };
    case ACTIVITIES_SEND_SUCCESS:
      return { ...state, activityCreated: action.payload };
      case SUBACTIVITY_SEND_SUCCESS:
      return { ...state, listActivity: action.payload };
    default:
      return state;
  }
};

MyActivities.js

    import React, { Component } from 'react';
import { Container, Content, View } from 'native-base';
import { connect } from 'react-redux';
import _ from 'lodash';
import { activitiesFetch } from '../actions/ActivitiesAction';
import Activity from './Activity';

class MyActivities extends Component {
  constructor(props) {
    super(props);
  }
  componentWillMount() {
    this.props.activitiesFetch();
  }
  componentWillReceiveProps(nextProps) {
    this.setState({ activitiesData: nextProps });
    console.log('next props:', nextProps);
  }
  componentWillUpdate(nextProps, nextState) {
    console.log('next props:', nextProps);
  }
 renderActivities() {
   // this.setState({ data: this.props.activitiesArray });
   console.log('acti():', this.props.activitiesData);
   const activitiesArray = _.values(this.props.activitiesData);
   console.log('acti[]:', activitiesArray);
   const list = _.values(activitiesArray[0]) || [];
   const act = list.map((activities) => (activities));
   console.log('acti[]:', act);
   const activities = _.values(act[1]);

   return (
     activities.map((singleActivity, i) => (
        <Activity
            key={i}
            Title={singleActivity.activityDescription}
            Author={activitiesArray[1].full_name}
            Time={singleActivity.time}
            PeopleStats={'0'}
        />
     ))
   );
 }
  render() {
    return (
      <Container>
        {/* <HeaderActivities /> */}
          <Content style={styles.Content}>
            {/* <ScrollView style={{ flex: 1 }}> */}
              <View style={styles.styleView}>
              {this.renderActivities()}
              </View>
            {/* </ScrollView> */}
          </Content>
      </Container>
    );
  }
}

const mapStateToProps = state => {
  return {
    // activitiesArray: _.values(state.activitiesData)
    activitiesData: state.activitiesData
   };
};

const styles = {
  Content: {
    backgroundColor: '#F0F5F7',
  },
  styleView: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
    alignItems: 'center',
    // alignItems: 'flex-start',
    // alignContent: 'flex-start'
  },
  ButtonActive: {
    borderBottomColor: '#FF8600',
    borderBottomWidth: 3,
    paddingBottom: 3,
    borderRadius: 0
  }
};

export default connect(mapStateToProps, { activitiesFetch })(MyActivities);

Answer 1

使用redux和react开发工具检查

做了预期的行动调度吗？
状态变化是否符合您的期望？
组件是否有你期望它们拥有的道具？

查看未更新状态Redux，React，Firebase

1 个答案: