Question

在我写的一个小型React / Redux应用程序中，我有一个看起来如下的thunk：

updateCategory(category){

        return function(dispatch, getState){

            dispatch({ type : types.UPDATE_CATEGORY, category });
            dispatch({ type : locationTypes.UPDATE_CATEGORY_FOR_ALL_LOCATIONS, category });

        }

    }

完整代码：

    //Category Duck
    import v4 from 'node-uuid';
    import {types as locationTypes} from './locations'
    export const types = {
        UPDATE_CATEGORY:"UPDATE_CATEGORY"
    };

    const initialState = [];

    export function reducer(state = initialState, action){

        switch (action.type) {


            case types.UPDATE_CATEGORY:

                return state.map( item => item.id !== action.category.id ? item : {...action.category} );

            default:
                return state;
        }

    };

    export const actions={

        updateCategory(category){

            return function(dispatch, getState){

                dispatch({ type : types.UPDATE_CATEGORY, category });
                dispatch({ type : locationTypes.UPDATE_CATEGORY_FOR_ALL_LOCATIONS, category });

            }

        }
    }

    //Location Duck
    import v4 from 'node-uuid';

    export const types = {

        UPDATE_CATEGORY_FOR_ALL_LOCATIONS:"UPDATE_CATEGORY_FOR_ALL_LOCATIONS"
    };

    const initialState=[];

    export function reducer(state = initialState, action){

        switch (action.type) {

            case types.UPDATE_CATEGORY_FOR_ALL_LOCATIONS:

                return state.map(item => item.category.id !== action.category.id ? item : { ...item, 'category':{name:action.category.name, id:action.category.id} })

            default:
                return state;
        }

    };

    export const actions={

        updateCategoryForAllLocations(category){
            return { type : types.UPDATE_CATEGORY_FOR_ALL_LOCATIONS, category}
        }
    }


    //configStore

    import { createStore, combineReducers, applyMiddleware, compose } from 'redux';

    import { routerReducer, routerMiddleware } from 'react-router-redux';//, push
    import logger from 'redux-logger';

    import * as storage from './localstorage';
    import throttle from 'lodash/throttle';

    import reducers from './duckes/rootReducer'; // Or wherever you keep your reducers

    import thunk from 'redux-thunk';

    const persistedState = storage.loadState();

    const configureStore = (history) => {

        const store = createStore(
            combineReducers({
                ...reducers,
                // router: routerReducer
            }), 
            persistedState, 
            applyMiddleware(thunk)
        );

        store.subscribe(throttle(() => {
            storage.saveState( store.getState() )
        }),1000);

        return store;

    }

    export default configureStore;

从连接组件中的UI单击处理程序调用它时，如下所示：

updateCategory({id:1, name:'foo')

我回来了错误：动作必须是普通对象。使用自定义中间件进行异步操作。

你能告诉我如何解决这个问题，或者解释为什么会这样吗？

调用的组件如下所示： / ManageCategoryPage

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';

import {actions as categoryActions} from '../../duckes/categories';
import CategoryForm from './CategoryForm';

import {getElementByID} from '../../utils';

class ManageCategoryPage extends Component {

    constructor(props) {

        super(props);

        //Init state
        this.state = { 
            'category' : Object.assign({},this.props.category),
            'errors':{}
         }

        //Bind functions
        this.saveCategory=this.saveCategory.bind(this);
        this.updateCategoryState=this.updateCategoryState.bind(this);
        this.categoryExists=this.categoryExists.bind(this);
    }

    updateCategoryState(event){
      ...
    }

    categoryExists(category){
       ...
    }

    saveCategory(event){
        event.preventDefault();
        const {category}=this.state;
        this.props.actions.updateCategory(category);
        this.props.history.push('/categories');

    }

    //Render
    render(){

        return (

            <CategoryForm 
                category={this.state.category}
                locations={this.props.locations}
                onChange={this.updateCategoryState}
                onSave={this.saveCategory}
                errors={this.state.errors}/>
        )
    }

}

//Prop Types validation
ManageCategoryPage.propTypes={
    category: PropTypes.object.isRequired,
    locations: PropTypes.array.isRequired,
    categories: PropTypes.array.isRequired,
    actions: PropTypes.object.isRequired
};

//Redux connect
const mapStateToProps = ({locations, categories}, ownProps) => {
    let category={id:'', name:''};
    return {
        category : getElementByID(categories, ownProps.match.params.id) || category,
        locations : locations,
        categories : categories
    };

};

const mapDispatchToProps = (dispatch) => {

    return { 
                'actions': bindActionCreators(categoryActions, dispatch)
           };
};

export default connect(mapStateToProps, mapDispatchToProps)(ManageCategoryPage);

Answer 1

我发现了这个问题，实际上这是我的一个错误，我有两个configStore文件，我以某种方式导入了我之前创建的旧版本的configStore文件，但它丢失了＆＃39; thunk＆＃39;作为applyMiddleware（）调用中的一个参数，所以它意味着它是applyMiddleware（）而不是applyMiddleware（thunk）。

如何从redux动作创建者/ thunk发送多个动作

1 个答案: