React-Redux вызов Firebase не показывает данные? - PullRequest
0 голосов
/ 26 мая 2019

У меня проблема с моим соединением редукса с огненной базой, я верю. Попытка получить все задания от пользователей в firebase.

У меня есть настройки магазина, действие и редуктор, я не совсем уверен, где я иду не так, поэтому я должен что-то пропустить, в консоли ничего не отображается, и я включил вызов console.log в свое действие, и ничего не отображается.

мои действия:

// Grab all Jobs
export const getJobs = (jobs) => ({
    type: 'GET_JOBS',
    jobs
});

export const startGetJobs = () => {
    return(dispatch, getState) => {
        const uid = getState().auth.uid;
        return database.ref(`users/${uid}/jobs`)
        .once('value')
        .then((snapshot) => {
            const jobs =[];
            console.log(jobs);

            //Parse the data using snapshot
            snapshot.forEach((childSnapshot) => {
                jobs.push({
                    id: childSnapshot.key,
                    ...childSnapshot.val()
                });
            });
            dispatch(getJobs(jobs));
        });
    };

};

мой файл редуктора:

const jobReducerDefaultState = [];

export default (state= jobReducerDefaultState, action) => {
    switch(action.type) {
        case 'ADD_JOB':
            return [
                ...state,
                action.job
            ];
        case 'REMOVE_JOB':
            return state.filter(({ id }) => id !== action.id);
        case 'EDIT_JOB':
            return state.map((job) => {
                if(job.id === action.id) {
                    return {
                        ...job,
                        ...action.updates
                    };
                } else {
                    return job;
                }
            });
        case 'GET_JOBS':
            return action.jobs;
        default:
            return state;
    }
};

Файл моего редукса:

import { createStore, combineReducers, applyMiddleware, compose} from 'redux';
import thunk from 'redux-thunk';
import jobsReducer from '../reducers/jobs';
import filtersReducer from '../reducers/filters';
import authReducer from '../reducers/auth';


const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export default () => {
    const store = createStore(
    combineReducers({
        jobs: jobsReducer,
        filters: filtersReducer,
        auth: authReducer
    }),
        composeEnhancers(applyMiddleware(thunk))
    );
    return store;
};

И пытаюсь вызвать это с помощью этого компонента:

import React from 'react';
import { connect } from 'react-redux';
import JobDataItem from './JobDataItem';
import { startGetJobs } from '../actions/jobs';

class JobData extends React.Component {

    ComponentDidMount() {
        this.props.startGetJobs();
    }
    render() {


    return (
        <div>
            {this.props.jobs.map((job) => {
                return <JobDataItem key={job.id} company={job.company}/>
            })}
        </div>
    );
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        startGetJobs: (jobs) => dispatch(startGetJobs(jobs))
    }
}
export default connect(undefined, mapDispatchToProps)(JobData);

, который передает эти данные в компонент jobDataItem для отображения на экране ниже:

import React from 'react';
import { Link } from 'react-router-dom';

const JobDataItem = ({ id, company}) => (
    <div>
        <Link to={`/edit/${id}`}>
            <h3>{company}</h3>
        </Link>
    </div>
);

export default JobDataItem;

моя база данных Firebase, например:

users/
      user-uid/
               jobs/
                    job-uid/
                            company:"Company Name",
                            jobTitle:"jobTitle:,
                            And so on...

Ожидаемый результат - «Название компании», но ничего не отображается вообще. я пытаюсь просто позвонить props.jobs.length, и он также отображается как 0.

EDITED 1. «Вызывается startGetJobs в componentDidMount (), 2. «Изменено props.jobs.map((job)... на this.props.jobs.map((job)...

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...