Question

我正在尝试使Redux与我的应用程序一起使用，但是出现错误的问题是：操作必须是普通对象。使用自定义中间件执行异步操作。

我是redux的新手，因为我看到的问题通常是因为人们没有使用applyMiddlewear，但是我这样做了，并且不明白为什么我的代码总是出现这个错误。

我的操作可能会出错：

export function wordsAreFetching(bool){
return{
    type: 'WORDS_ARE_FETCHING',
    areFetching: bool
}



export function wordsFetchData(parsed) {
return (dispatch) => {
    dispatch(wordsAreFetching(true));

    fetch('APICALL(here is url actually)', {
        method: "POST",
        headers: {
            "Content-type": "application/json"
        },body: JSON.stringify({
            words: parsed
        })
    })
        .then((response) => {
            if (!response.ok) {
                throw Error(response.statusText);
            }

            dispatch(wordsAreFetching(false));

            return response;
        })
        .then((response) => response.json())
        .then((items) => dispatch(wordsFetchDataSuccess(items)))
        .catch(() => dispatch(wordsHasErrored(true)));
};
console.log(this.props.items)
}

我的联合减速器文件：

export default combineReducers({
word,
wordsAreFetching,
wordsFetchHasErrored
});

我的商店创建：

export default function configureStore(initialState) {
return createStore(
    rootReducer,
    initialState,
    applyMiddleware(thunk)
);
}

我怎么称呼

const mapStateToProps = (state) => {
return {
    items: state.items,
    hasErrored: state.wordsFetchHasErrored,
    areFetching: state.wordsAreFetching
};
};

const mapDispatchToProps = (dispatch) => {
    return {
        fetchData: (parse) => dispatch(wordsFetchData(parse))
    };
 };

componentDidMount = () => {
       this.props.fetchData(this.state.filterArray);
    }

Answer 1

您的代码混乱。

Redux具有以下主要部分：

Actions应该是具有type属性的普通对象。可以使用action creators创建动作。动作创建者只需返回动作（普通对象）即可。或者，您也可以使用绑定动作创建者，该创建者也可以进行分发，例如wordsFetchData。

从您的代码开始，以下功能应为acion创建者：
- wordsAreFetching(bool)
- wordsFetchData
- wordsFetchDataSuccess
- wordsHasErrored
Reducers接受状态和操作并返回状态。我在您的代码中没有看到任何reducer。

此电话不正确

export default combineReducers({
    word,
    wordsAreFetching,
    wordsFetchHasErrored
});

以上所有功能都是动作创建者，不应放在combineReducers调用中。

mapDispatchToProps应该看起来像

const mapDispatchToProps = (dispatch) => {
    return {
        fetchData: (parse) => wordsFetchData(parse)(dispatch)
    };
};

由于wordsFetchData返回以dispatch作为参数的功能。

为什么会出现错误：动作必须是普通对象。使用自定义中间件进行异步操作。

1 个答案: