React-Redux无法从firebase获取数据反应原生

Question

我在firebase中创建了一个数据库，其架构如下：

现在我所做的一切只是在我做一个控制台日志时出现但没有显示出来。

以下是我的JobsActions.js的代码

import firebase from 'firebase';
import {
  JOBS_FETCH_SUCCESS
} from './types';

export const jobsFetch = () => {
  return (dispatch) => {
    firebase.database().ref('/jobs')
      .on('value', snapshot => {
        dispatch({ type: JOBS_FETCH_SUCCESS, payload: snapshot.val() });
      });
  };
};

这是我的减速机：

import {
    JOBS_FETCH_SUCCESS
  } from '../actions/types';

  const INITIAL_STATE = {
     // jobs: 'RCCA'
  };

  export default (state = INITIAL_STATE, action) => {
     switch (action.type) {
       case JOBS_FETCH_SUCCESS:
         console.log(action);
         return state;
         //return action.payload;
       default:
        return state;
  }
};

这是JobsList

import _ from 'lodash';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { View, Text } from 'react-native';
import { jobsFetch } from '../actions';


class JobsList extends Component {

   componentWillMount() {
     this.props.jobsFetch();
   }

  render() {
    return (

    <View style={{ paddingTop: 20 }}>
        <Text>Hello</Text>
    </View>
    );
  }
}

export default connect(null, { jobsFetch })(JobsList);

我使用firebase进行身份验证，而不是与firebase的连接是一个问题，从我看来，似乎可能是动作文件中的ref路径错误了？

Answer 1

这里的主要问题不在于Firebase，因为我相信其他一切都很好，但是使用React-Redux。

将组件连接到存储时，connect函数接收两个函数。第一个（通常称为mapStateToProps）接收状态并返回将添加到props中的对象。在这种情况下，您没有使用它，因此传递null是一个有效的决定。

第二个（通常称为mapDispatchToProps）接收调度作为参数，并应返回一个对象，该对象具有将插入到可用于分派新动作的道具的函数。在这种情况下，您只是传递一个对象作为连接{ jobsFetch }的第二个参数。

执行this.props.jobsFetch();时，您实际上正在返回接收调度的函数，因此实际上没有执行任何操作。

您的mapDispatchToProps应与此类似

const mapDispatchToProps = dispatch => {
  return {
    jobsFetch : () => dispatch(jobsFetch())
  }
}

export default connect(
  null,
  mapDispatchToProps
)(JobsList)

在这里，我假设您实际上正在使用Redux thunk，因为您正在返回一个函数，该函数接收调度作为您操作中的参数。

正如您所看到的，我们首先调用jobsFetch()以获取接收reducer的函数，然后我们发送它。

如果这不起作用，请告诉我！可能还有其他不正确的东西，但这是应该解决的问题。希望它有所帮助！