React-Redux не может получить данные из firebase реагировать на нативный - PullRequest
Новая
       12

React-Redux не может получить данные из firebase реагировать на нативный

0 голосов
/ 28 мая 2018

Я создал базу данных в firebase, схема ниже:

enter image description here

Теперь все, что я пытался сделать, это просто показать еекогда я делаю консольный журнал, но ничего не появляется.

Ниже приведен код моего 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 указан неверно в файле Actions?

1 Ответ

0 голосов
/ 29 мая 2018

Ваша главная проблема здесь не на самом деле с Firebase, поскольку я считаю, что все остальное в порядке, а с React-Redux.

При подключении компонента к хранилищу функция подключения получает две функции.Первый (обычно называемый mapStateToProps) получает состояние и возвращает объект, который будет добавлен в реквизит.В этом случае вы не используете его, поэтому допустимым является принятие null.

Второй (обычно называемый mapDispatchToProps) получает диспетчеризацию в качестве параметра и должен вернуть объект с функциямиэто будет вставлено в реквизит, который может быть использован для отправки новых действий.В этом случае вы просто передаете объект в качестве второго параметра connect { jobsFetch }.

Когда вы делаете this.props.jobsFetch();, вы фактически возвращаете функцию, которая получает диспетчеризацию, поэтому на самом деле ничего не выполняется.

Ваш mapDispatchToProps должен быть похож на этот 

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

export default connect(
  null,
  mapDispatchToProps
)(JobsList)

Здесь я предполагаю, что вы на самом деле используете Redux thunk , так как вы возвращаетефункция, которая получает диспетчеризацию как параметр в ваших действиях.

Как вы можете видеть, мы сначала вызываем jobsFetch(), чтобы получить функцию, которая получает редуктор, а затем отправляем ее.

Дайте мне знать, если это не работает!Может быть что-то еще, что не правильно, но это то, что следует устранить.Надеюсь, это поможет!

...