Question

我有一个仅返回将来事件的应用程序。我能够解析我的Firebase实时数据库，并仅返回将来的事件。然后它将这个数据数组传递给我的reducer。在我的减速器中，我正在记录有效负载。控制台日志显示我想要的数据。现在，在组件屏幕中，我会控制台日志以查看应该从化简器中看到的数据，并且该数据为空。

我的动作

    export const getAllEvents = () => {

        var currentTime = Date.now();

          return (dispatch) => {
            var ref = firebase.database().ref('Events/');
            ref.orderByChild("availableSpots").on("value", function(snapshot) {

                snapshot.forEach(child => {
                    var time = child.val().epochTime;

                   if (currentTime < time) {
                        console.log("Events redux: ", child.val());

                        dispatch({ type: GET_EVENT_LIST, payload: child.val() });
                    }
                })
                });
              });


          }
      }

如您所见，我正在控制台记录child.val（），结果如下所示：

现在，我已通过调度将其连接到我的减速器上。

import { GET_EVENT_LIST } from '../actions/types';
const INITIAL_STATE = {
    eventList: [],
};

const eventListReducer = (state = INITIAL_STATE, action) => {
    switch (action.type){
        case GET_EVENT_LIST:
            console.log("action count", action.payload);
            return { ...state, eventList: [...state.eventList, action.payload] };

        default:
        console.log("default ");
            return state;
    }
};

export default eventListReducer;

您可以看到该操作的控制台日志。正在记录有效负载并产生预期结果：

现在回到我的组件屏幕：

    import { getUserThunk, getAllEvents } from '../actions';
    import {connect} from 'react-redux';

    class Home extends Component {

      componentWillMount() {

        console.log("Component will mount");
        this.props.getUserThunk();
        this.props.getAllEvents();
      }
    render() {
      console.log("usersadf ", this.props.userReducer)
      console.log("Props in home ", this.props.eventListReducer)
      return (
        //some return code here

      );
    }

export default connect(
    state=>({userReducer: state.userReducer, eventListReducer: state.eventListReducer}), 
    { getUserThunk, getAllEvents }
  )(Home);

现在您可以看到，我确实有不同的redux动作，并且reducer挂接了，并且实现了。但是，有问题的返回空。

React Redux reducer不返回

0 个答案: