Question

我认为我的redux到Firebase连接遇到了问题。试图从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;
    }
};

我的redux存储文件：

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。

已编辑 1.“在componentDidMount（）中称为startGetJobs， 2.“将props.jobs.map((job)...更改为this.props.jobs.map((job)...

我现在获得的道具在控制台中是未定义的错误，并且屏幕上仍然没有任何显示。

对Firebase的React-Redux调用是否不显示数据？

0 个答案: