Question

我正在构建一个Web应用程序，该应用程序正在调用操作以从API获取信息。调用了该操作，我可以使用console.log看到我的数组，但是未调用reducer，也不确定为什么。

此处的目标是从自定义api获取货车信息，并将其传递回去，以响应将显示可用货车的货车卡。

app.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;

Answer 1

从您的评论看来，您没有在创建化简器中包括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;

这将解释为什么未调用reducer的原因（并且我假设该值在组件中未定义）。为商店配置化简版时，不包括状态对象。

调用操作后，Redux不会从reducer返回数据

1 个答案: