reactjs - 无法访问我的 redux 商店中的数据
问题描述
我有一个组件,我正在尝试从我的 redux 存储中访问数据。通过我的开发工具,我能够看到数据正在填充到 redux 存储中。但是,当我尝试 console.log 该数据以在将其实现到我的组件中之前查看数据时,我变得不确定。
这是我的反应组件。
import React, { Fragment, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Table } from 'react-bootstrap';
import Moment from 'react-moment';
import Button from '../components/Button';
import ActivitySummary from '../components/ActivitySummary';
import { projectsInfoDetails } from '../actions/projectInfoActions';
import { projectContacts } from '../actions/projectContactActions';
import SectionHeader from '../components/SectionHeader';
import Loader from '../components/Loader';
import Message from '../components/Message';
const ProjectScreen = ({ match }) => {
const dispatch = useDispatch();
const projectInfoDetails = useSelector(state => state.projectInfoDetails);
const { loading, error, projects } = projectInfoDetails;
const contactDetails = useSelector(state => state.contactDetails);
const { projectContactDetails } = contactDetails;
useEffect(() => {
dispatch(projectsInfoDetails(match.params.id));
dispatch(projectContacts(match.params.id));
}, [dispatch, match]);
console.log(projectContactDetails);
return (
<Fragment>
<div>
<SectionHeader sectionName='Project' />
<Button buttonName='Edit Project' />
</div>
{loading ? (
<Loader />
) : error ? (
<Message variant='danger'>{error}</Message>
) : (
<div style={{ backgroundColor: '#F8F8F8' }}>
<Table className='borderless'>
<tbody>
<tr>
<td>
<strong>Name: </strong>
{projects.name}
</td>
<td>
<strong>Status: </strong>
{projects.status}
</td>
</tr>
<tr>
<td>
<strong>State: </strong>
{projects.state}
</td>
<td>
<strong>County: </strong>
{projects.county}
</td>
</tr>
<tr>
<td>
<strong>Congressional District: </strong>
{projects.district}
</td>
<td>
<strong>Type: </strong>
{projects.type}
</td>
</tr>
<tr>
<td>
<strong>Funding Source: </strong>
<br />
{`${projects.fundingSource} ${projects.fundingSourceName}`}
</td>
<td>
<strong>Funding Source Goal: </strong>
<br />
{projects.fundingSourceGoal}
</td>
<td>
<strong>Start Date: </strong>
<br />
<Moment format='MM/DD/YYYY'>{projects.startDate}</Moment>
</td>
<td>
<strong>End Date: </strong>
<br />
{projects.endDate === null ? (
''
) : (
<Moment format='MM/DD/YYYY'>{projects.endDate}</Moment>
)}
</td>
<td>
<strong>Funding Percent: </strong>
<br />
{projects.fundingPercent}
</td>
</tr>
<tr>
<td>
<strong>Contact: </strong>
{projects.contact}
</td>
</tr>
<tr>
<td>
<strong>Start Date: </strong>
<Moment format='MM/DD/YYYY'>
{projects.projectStartDate}
</Moment>
</td>
<td>
<strong>End Date: </strong>
{projects.projectEndDate === null ? (
''
) : (
<Moment format='MM/DD/YYYY'>
{projects.projectEndDate}
</Moment>
)}
</td>
</tr>
<tr>
<td colSpan='5'>
<strong>Goals and Objectives: </strong>
{projects.goalsAndObjectives}
</td>
</tr>
<tr>
<td colSpan='5'>
<strong>Success Description: </strong>
{projects.successDescription}
</td>
</tr>
<tr>
<td>
<strong>Accountable Staff</strong>
{projects.accountableStaff &&
projects.accountableStaff.map(data => (
<tr key={data._id}>
{data.lastName}, {data.firstName}
</tr>
))}
</td>
</tr>
<tr>
<td>
<strong>Project ID: </strong>
{projects.projectId}
</td>
</tr>
</tbody>
</Table>
</div>
)}
<ActivitySummary />
</Fragment>
);
};
export default ProjectScreen;
这是我的减速器:
import {
PROJECT_CONTACT_REQUEST,
PROJECT_CONTACT_SUCCESS,
PROJECT_CONTACT_FAIL
} from '../constants/projectConstants';
export const projectContactReducer = (
state = { projectContact: [] },
action
) => {
switch (action.type) {
case PROJECT_CONTACT_REQUEST:
return { loading: true, projectContact: [] };
case PROJECT_CONTACT_SUCCESS:
return { loading: false, projectContact: action.payload };
case PROJECT_CONTACT_FAIL:
return { loading: false, error: action.payload };
default:
return state;
}
};
最后是我的行动呼吁:
import axios from 'axios';
import {
PROJECT_CONTACT_REQUEST,
PROJECT_CONTACT_SUCCESS,
PROJECT_CONTACT_FAIL
} from '../constants/projectConstants';
export const projectContacts = id => async dispatch => {
try {
dispatch({ type: PROJECT_CONTACT_REQUEST });
const { data } = await axios.get(`/api/projects/${id}/projectscontact`);
dispatch({
type: PROJECT_CONTACT_SUCCESS,
payload: data
});
} catch (error) {
dispatch({
type: PROJECT_CONTACT_FAIL,
payload:
error.response && error.response.data.message
? error.response.data.message
: error.message
});
}
};
在我的开发工具中,服务器的响应如下所示:
我的猜测是它与未在 console.log 之前填充的数据有关,但似乎无法访问数据。
谢谢
TL
我的组合减速器文件:
import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import { projectDetailsReducer } from './reducers/projectReducer';
import { pageReducer } from './reducers/pageReducer';
import { projectInfoReducer } from './reducers/projectInfoReducer';
import { fundingSourceReducer } from './reducers/fundingSourcesReducer';
import { fundSourceReducer } from './reducers/fundingSourceReducer';
import { contactsReducer } from './reducers/contactsReducer';
import { contactReducer } from './reducers/contactReducer';
import { projectContactReducer } from './reducers/projectContactReducer';
const reducer = combineReducers({
projectDetails: projectDetailsReducer,
projectInfoDetails: projectInfoReducer,
pageDetails: pageReducer,
fundingSourceDetails: fundingSourceReducer,
fundSourceDetails: fundSourceReducer,
contactsDetails: contactsReducer,
contactDetails: contactReducer,
projectContactDetails: projectContactReducer
});
const initialState = {};
const middleware = [thunk];
const store = createStore(
reducer,
initialState,
composeWithDevTools(applyMiddleware(...middleware))
);
export default store;
解决方案
你projectContactDetails
错了。没有减速器projectContact
的projectContactDetails
状态,projectContactReducer
所以你应该得到这样的:
const contactDetails = useSelector(state => state.projectContactDetails);
const { projectContact } = contactDetails;
推荐阅读
- sql - 在一个结果集中返回两个关系
- reactjs - 获取请求总是返回网络错误
- timer - 当前时间达到特定时间时触发功能的最佳方式
- javascript - 从纯javascript中的函数打开模态
- apache-kafka - 卡夫卡消费者重新平衡监听器不工作
- android - 当我尝试使用 Screengrab 捕获屏幕截图时,我在 fastlane 中的语言设置出现错误
- r - Python 中与 R 的 nlminb 最接近的函数是什么?
- node.js - 升级 mongoose 5.x 后,我的应用程序变得非常慢
- amazon-web-services - 如何获得 AWS Windows 实例的多用户远程访问?
- html - SpringBoot模板html无法加载