Redux Thunk: Les actions doivent être des objets simples

Question

je suivais ces twoguides pour mettre en œuvre un appel API dans une action avec 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 
} 

Mon action, 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); 
    }; 
} 

Et l'appel de l'écran 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); 

Et le fichier principal 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; 

J'ai suivi exactement ce que les deux après ont été dit et la documentation officielle, mais je cette erreur lors de l'atterrissage dans la fiche produit:

Les actions doivent être des objets simples. Utiliser le middleware personnalisé pour les actions asynchrones

Il semble que mon middleware React Thunk ne s'applique pas. Comment puis-je vérifier cela?

Answer 1

Comme indiqué dans la section des commentaires, le problème est que vous avez oublié de placer le composant Fournisseur pour envelopper votre composant de niveau supérieur. Donc, pour résoudre ce problème, vous devriez envelopper votre composant Root avec le fournisseur et passer le magasin là.

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

const store = configureStore(); 

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