Redux Thunk：操作必须是普通对象

Question

我按照这些 two guides 实现了一个 API 在 Action 中使用 Redux Thunk 调用：

configureStore.js

import { createStore, applyMiddleware } from 'redux'
import rootReducer from '../core/reducers'
import thunk from 'redux-thunk'

export default function configureStore() {
    let store = createStore(
        rootReducer,
        applyMiddleware(thunk)
    );

    return store
}

我的行动，product.js：

function increment() {
    return {
        type: FETCHING_DATA
    };
}

export function fetchData() {
    return dispatch => {
        setTimeout(() => {
            // Yay! Can invoke sync or async actions with `dispatch`
            dispatch(increment());
        }, 1000);
    };
}

来自 Product.js 屏幕的呼叫：

class Product extends Component {

    constructor(props: Props) {
        super(props);

        this.state = {products: null};
    }

    componentDidMount() {
        this.props.fetchData();
    };

    // Other code
}

function mapStateToProps (state) {
    return {
        cart: state.cart,
        product: state.product
    }
}

function mapDispatchToProps (dispatch) {
    return {
        plusOneProduct: (id) => dispatch(plusOneProduct(id)),
        clearCart: () => dispatch(clearCart()),
        fetchData: () => dispatch(fetchData())
    }
}

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

和主 app.js 文件：

import {View} from 'react-native';
import React from 'react';
import {NativeRouter, Route, Redirect} from 'react-router-native';

import {Root} from './config/router';
import configureStore from './configureStore'

const store = configureStore();

const MyApp = () => {
    return (
        <Root store={store}/>
    );
};

export default MyApp;

我确实完全按照两个 post 所说的和官方文档进行了操作，但是在登陆产品页面时出现此错误：

Actions must be plain objects. Use custom middleware for async actions

我的 React Thunk 中间件似乎没有应用。我怎样才能检查这个？

Answer 1

正如评论部分所讨论的那样，问题是您忘记了将 Provider 组件放在顶级组件中。所以要解决这个问题，你应该用 Provider 组件包装你的 Root 并在那里传递商店。

//... rest of imports
import { Provider } from 'react-redux';

const store = configureStore();

const MyApp = () => {
    return (
      <Provider store={store}>
        <Root/>
      </Provider>
    );
};

Redux Thunk：操作必须是普通对象

Redux Thunk : Actions must be plain objects

react-native

redux

redux-thunk