我正在创建一个Redux-React Web应用程序，该应用程序允许整个应用程序中的数据异步。我遇到了一个问题，我的Redux状态显示数据：
Shows Redux DevTools and current state
但是，当我为我的应用调用道具时，它返回为null。无论我尝试将两者连接起来，都无济于事。
网络应用
import React, { Component } from 'react';
import Buscard from './components/Buscard';
import DispatchHeader from './components/DispatchHeader';
import { Button } from '@material-ui/core';
import './style.css';
import './bootstrap.min.css';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
// import addVan from './store/actions/add_Vans';
// import getVansList, { reorderVans } from './store/actions/get_van_list';
// import getRiderList from './store/actions/get_rider_list';
import RiderItem from './components/riderItem';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import Table from '@material-ui/core/Table';
import { DragDropContext, Droppable } from 'react-beautiful-dnd';
import { withRouter } from 'react-router-dom'
import { root } from 'postcss';
import withReducer from 'app/store/withReducer';
import classNames from 'classnames';
import reducer from './store/reducers';
import * as Actions from './store/actions';
const buttonStyle = {
margin: '0 10px'
}
class AdminApp extends Component {
constructor(props) {
super(props);
this.state = {
openModal: false,
P_Key: '',
vanName: '',
seatsTotal: '',
newpartyNM: '',
newaddress1: '',
newnumParty: '',
newnumCooler: '',
newphoneNum: '',
newpickUp: '',
columns: {
'column-1': {
id: 'column-1',
vans: this.props.vansList
}
},
columns2: {
'column-2': {
id: 'column-2',
vans: this.props.vansList
}
}
}
this.handleNameVanChange = this.handleNameVanChange.bind(this);
this.handleTotalSeatsChage = this.handleTotalSeatsChage.bind(this);
this.toggleModalState = this.toggleModalState.bind(this);
this.clearVanFormCloseModal = this.clearVanFormCloseModal.bind(this);
this.handleVanCreation = this.handleVanCreation.bind(this);
this.handleRiderEdit = this.handleRiderEdit.bind(this);
this.handlePartyEditChange = this.handlePartyEditChange.bind(this);
this.handleAddressEditChange = this.handleAddressEditChange.bind(this);
this.handleNumPartyEditChange = this.handleNumPartyEditChange.bind(this);
this.handleNumCoolerEditChange = this.handleNumCoolerEditChange.bind(this);
this.handlePhoneNumEditChange = this.handlePhoneNumEditChange.bind(this);
this.handlePickUpEditChange = this.handlePickUpEditChange.bind(this);
}
componentDidMount() {
this.props.getRiderList();
}
renderRiders() {
//console.log(this.props.riderList)
return this.props.riderList.map((rider, index) => {
return (
<RiderItem key={rider.P_Key}
riderList={rider}
editRider={this.handleRiderEdit}
//onVanChange={this.handleNameVanChange}
handlePartyEditChange={this.handlePartyEditChange}
handleAddressEditChange={this.handleAddressEditChange}
handleNumPartyEditChange={this.handleNumPartyEditChange}
handleNumCoolerEditChange={this.handleNumCoolerEditChange}
handlePhoneNumEditChange={this.handlePhoneNumEditChange}
handlePickUpEditChange={this.handlePickUpEditChange}
newpartyNM={this.state.newpartyNM}
newaddress1={this.state.newaddress1}
newnumParty={this.state.newnumParty}
newnumCooler={this.state.newnumCooler}
newphoneNum={this.state.newphoneNum}
newpickUp={this.state.newpickUp}
index={index}
/>)
})
}
toggleModalState() {
if (this.state.openModal) {
this.clearVanFormCloseModal();
} else {
this.setState({
openModal: true
})
}
}
handleNameVanChange(e) {
this.setState({
vanName: e.target.value
});
}
handleTotalSeatsChage(e) {
this.setState({
seatsTotal: e.target.value
});
}
clearVanFormCloseModal() {
this.setState({
vanName: '',
seatsTotal: '',
openModal: false
})
}
handlePartyEditChange(e) {
this.setState({
newpartyNM: e.target.value
});
}
handleAddressEditChange(e) {
this.setState({
newaddress1: e.target.value
});
}
handleNumPartyEditChange(e) {
this.setState({
newnumParty: e.target.value
});
}
handleNumCoolerEditChange(e) {
this.setState({
newnumCooler: e.target.value
});
}
handlePhoneNumEditChange(e) {
this.setState({
newphoneNum: e.target.value
});
}
handlePickUpEditChange(e) {
this.setState({
newpickUp: e.target.value
});
}
handleVanCreation() {
//e.preventDefaults();
const vans = {
nameVan: this.state.vanName,
totalSeats: this.state.seatsTotal
}
this.props.addVan(vans);
this.clearVanFormCloseModal();
}
handleRiderEdit() {
const riders = {
partyNM: this.state.newpartyNM,
address1: this.state.newaddress1,
numParty: this.state.newnumParty,
numCooler: this.state.newnumCooler,
phoneNum: this.state.newphoneNum,
pickUp: this.state.newpickUp
}
if (this.props.riderList.partyNM === riders.partyNM) {
console.log(riders);
} else {
console.log(this.props.riderList)
console.log(riders.partyNM)
console.log("Didn't work")
}
}
onDragEnd = (result) => {
if (!result.destination) {
return;
}
if (
result.destination.droppableId === result.source.droppableId && result.destination.index === result.source.index
) {
return;
}
if (result.type === 'vans') {
this.props.reorderVans(result, this.props.vansList);
}
};
renderVans() {
//Testing to see what is in my props for the two
console.log(this.props.vansList);
console.log(this.props.riderList);
const vanslist = this.props.vansList;
return (vanslist.map((van, index) => {
return (
<Buscard key={van.P_Key} vanList={van} index={index} />
)
}));
}
render() {
return (
<div>
<DragDropContext
onDragEnd={this.onDragEnd}
>
<DispatchHeader
createVan={this.handleVanCreation}
open={this.state.openModal}
close={this.toggleModalState}
onVanChange={this.handleNameVanChange}
onTotalChange={this.handleTotalSeatsChage}
vanName={this.state.nameVan}
totalSeats={this.state.seatsTotal}
/>
<div style={buttonStyle}>
<Button
onClick={this.toggleModalState}
variant="contained"
color="primary"
className="w-half"
>
ADD Van
</Button>
</div>
<div className={classNames("flex flex-1 overflow-x-auto overflow-y-hidden")}>
<Droppable
droppableId={this.state.columns}
type="vans"
direction="horizontal"
>
{(provided) => (
<div ref={provided.innerRef} className="flex p-16 md:p-24">
{this.renderVans()}
{/*Whatever reason having them commented out loads them, however on initial they don't....*/}
{provided.placeholder}
</div>
)}
</Droppable>
</div>
<Paper>
<Table>
<TableHead>
<TableRow>
<TableCell>Party Name</TableCell>
<TableCell >Address</TableCell>
<TableCell >Number in Party</TableCell>
<TableCell >Number of Coolers</TableCell>
<TableCell >Phone Number</TableCell>
<TableCell >Pick Up</TableCell>
<TableCell >Edit</TableCell>
<TableCell>Add to Van</TableCell>
</TableRow>
</TableHead>
{/*this.renderRiders()*/}
</Table>
</Paper>
</DragDropContext>
</div >
)
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({
getVansList: Actions.getVansList,
getRiderList: Actions.getRiderList,
reorderVans: Actions.reorderVans,
addVan: Actions.addVan,
}, dispatch);
}
function mapStateToProps(state, ownProps) {
return {
vansList: state.vansList,
riderList: state.riderList,
//serData: state.userData
}
}
export default withReducer('adminApp', reducer)(withRouter(connect(mapStateToProps, mapDispatchToProps)(AdminApp)));
获取骑手名单动作
import { GET_RIDER_LIST, GET_VANS_LIST } from './types';
import axios from 'axios';
import * as Actions from './index';
export function getRiderList() {
return dispatch => {
axios.get('https://8alpuah738.execute-api.us-east-1.amazonaws.com/prod/riderinfo/getriders/')
.then(response =>
dispatch(
getRiderListAsync(response.data))
);
axios.get('https://8alpuah738.execute-api.us-east-1.amazonaws.com/prod/vaninfo')
.then(response =>
dispatch(getVansListAsync(response.data))
)
}
}
function getRiderListAsync(riders) {
//console.log(riders);
return {
type: GET_RIDER_LIST,
payload: riders
};
}
function getVansListAsync(vans) {
//console.log(vans);
return {
type: GET_VANS_LIST,
payload: vans
};
}
获取Rider Reducer
import {
GET_RIDER_LIST
} from '../actions/types';
const initialState = null;
const riderReducer = function (state = initialState, action) {
switch (action.type) {
case GET_RIDER_LIST:
{
return { ...action.payload }
}
default:
return state;
}
}
export default riderReducer;
连接Reducer进行存储：
import * as reduxModule from 'redux';
import {applyMiddleware, compose, createStore} from 'redux';
import createReducer from './reducers';
import thunk from 'redux-thunk';
/*
Fix for Firefox redux dev tools extension
https://github.com/zalmoxisus/redux-devtools-instrument/pull/19#issuecomment-400637274
*/
reduxModule.__DO_NOT_USE__ActionTypes.REPLACE = '@@redux/INIT';
const composeEnhancers =
process.env.NODE_ENV !== 'production' &&
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
// Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
}) : compose;
const enhancer = composeEnhancers(
applyMiddleware(thunk)
);
const store = createStore(createReducer(), + window.__REDUX_DEVTOOLS_EXTENSION__&& window.__REDUX_DEVTOOLS_EXTENSION__(), enhancer);
store.asyncReducers = {};
export const injectReducer = (key, reducer) => {
if ( store.asyncReducers[key] )
{
return;
}
store.asyncReducers[key] = reducer;
store.replaceReducer(createReducer(store.asyncReducers));
return store;
};
export default store;