reactjs - 调用 action 后,Redux 没有从 reducer 返回数据
问题描述
我正在构建一个 Web 应用程序,该应用程序调用一个操作以从 API 获取信息。调用了该操作,我可以使用 console.log 查看我的数组,但是没有调用减速器,我不知道为什么。
这里的目标是从自定义 api 获取货车信息并将其传回以响应填充货车卡,以显示可用的货车。
应用程序.js
import React, { Component } from 'react';
import Buscard from './components/Buscard';
import DispatchHeader from './components/DispatchHeader';
import { Button } from '@material-ui/core';
import RiderTable from './components/riderTable';
import './style.css';
import './bootstrap.min.css';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom'
import withReducer from 'app/store/withReducer';
import addVan from './store/actions/add_Vans';
import getVansList from './store/actions/get_van_list';
import _ from '@lodash';
import Toast from './components/Toast';
import axios from 'axios';
const buttonStyle = {
margin: '0 10px'
}
class AdminApp extends Component {
constructor(props) {
super(props);
this.state = {
openModal: false,
vanName: '',
seatsTotal: ''
}
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);
}
componentDidMount() {
this.props.getVansList();
}
renderVans() {
if (this.props.vansList) {
return this.props.vanList.map(van => {
return <Buscard vans={van} />;
});
} else {
return <div>Loading...</div>
}
}
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
})
}
handleVanCreation() {
const vans = {
nameVan: this.state.vanName,
totalSeats: this.state.seatsTotal
}
// const nameVan = this.state.vanName;
// const totalSeats = this.state.seatsTotal;
this.props.addVan(vans);
//axios.post('URL Placeholder', { nameVan, totalSeats })
this.clearVanFormCloseModal();
}
render() {
return (
<div>
{this.props.toast
? <Toast
message={this.props.toast}
/> : null
}
<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>
{this.renderVans()}
<RiderTable />
</div>
)
};
}
function mapStateToProps(state) {
return {
vansList: state.vansList,
toast: state.toast
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({
getVansList: getVansList,
addVan: addVan
}, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(AdminApp);
get_van_list.js //动作
import { GET_VANS_LIST } from './types';
import axios from 'axios';
import { dispatch } from 'rxjs/internal/observable/pairs';
export default function getVansList() {
return dispatch => {
axios.get('URL Placeholder')
.then(res => {
//console.log(res.data);
const vans = res.data.map(van => {
//console.log(van.P_Key);
return van;
});
dispatch(getVansListAsync(vans));
});
}
}
function getVansListAsync(vans) {
return {
type: GET_VANS_LIST,
payload: vans
};
}
reducerVanList.js //减速器
import {
GET_VANS_LIST,
ADD_VANS
} from '../actions/types';
export default function (state = [], action) {
switch (action.type) {
case GET_VANS_LIST:
console.log(action.payload)
return action.payload;
case ADD_VANS:
return [action.payload, ...state];
default:
return state;
}
}
存储配置
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(), 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;
解决方案
从您的评论看来,您在创建减速器时没有包含您的 vansList 状态对象。尝试将其添加到 combineReducers 中。我已经假设了导入中的位置/名称,但这就是想法......
import {combineReducers} from 'redux';
import fuse from './fuse';
import auth from 'app/auth/store/reducers';
import vansList from './reducerVanList';
const createReducer = (asyncReducers) => combineReducers({ auth, fuse, vansList, ...asyncReducers });
export default createReducer;
这可以解释为什么没有调用减速器(我假设该值在组件中未定义)。在为 store 配置 reducer 时,不包括 state 对象。
推荐阅读
- java - 弹簧启动;我们可以在 Java 枚举中使用 @Value
- c++ - 为什么内存清理程序会报告 std::map 使用了未初始化的值?
- architecture - 服务启动时对其他服务和基础设施的依赖
- javascript - 甚至无法在浏览器中运行代码,因为 localhost 拒绝连接
- amazon-web-services - 在移动设备或 Chrome 隐身模式下,静态 s3 站点会出现 403 错误
- amazon-web-services - AWS Appflow <-> Salesforce 集成
- sql - Oracle SQL在单元格中查找最大位数
- android - Android:从 Firebase 下载的 dex 不起作用:“没有找到 dex 位置的原始 dex 文件”
- javascript - 无法提交表单操作,因为它被覆盖隐藏 - 我尝试过 Z-Index 和 Pointer-events:none; CSS/反应
- javascript - 如果 li id 为空,则隐藏 div