React-Redux 无法从 firebase react native 获取数据答案

【问题标题】：React-Redux unable to fetch data from firebase react nativeReact-Redux 无法从 firebase react native 获取数据
【发布时间】：2018-11-07 09:02:38
【问题描述】：

我在 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;
  }
};

这是工作列表

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 的连接，这是个问题，据我所知，Actions 文件中的 ref 路径似乎有误？

【问题讨论】：

标签： firebase react-native react-redux

【解决方案1】：

这里的主要问题实际上不是 Firebase，因为我相信其他一切都很好，而是 React-Redux。

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

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

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

您的mapDispatchToProps 应该与此类似

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

export default connect(
  null,
  mapDispatchToProps
)(JobsList)

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

如您所见，我们首先调用jobsFetch() 以获取接收reducer 的函数，然后我们调度它。

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

【讨论】：