為什么我會收到錯誤：操作必須是普通對象。 使用自定義中間件進行異步操作。

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有以下主要部分：

1. 應該是具有type屬性的普通對象的動作 。 可以使用動作創建者創建動作 。 動作創建者只返回動作（普通對象）。 或者您也可以使用也可以調度的綁定動作創建器，例如wordsFetchData 。

   在您的代碼中，以下函數應該是acion創建者：

   • wordsAreFetching(bool)
   • wordsFetchData
   • wordsFetchDataSuccess
   • wordsHasErrored

2. Reducers接受狀態和動作並返回狀態。 我沒有在你的代碼中看到任何減速器。

這個電話不正確

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

以上所有功能都是動作創建者，不應放在combineReducers調用中。

mapDispatchToProps應該是這樣的

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

由於wordsFetchData返回將dispatch作為參數的fucntion。