Redux Thunk Aktion nicht feuernd

Question

Ich versuche, einige Informationen über einen Benutzer zu erhalten und es in Redux speichern, wenn der Benutzer sich anmeldet. Ich schicke eine Aktion an die UID, die gut funktioniert. Direkt danach (ich habe auskommentiert, wo im SignIn.js-Code) versuche ich eine Redux-Thunk-Aktion zu versenden, die eine Liste von Produktbildern von Firebase bekommt. Aus irgendeinem Grund wird diese Aktion nicht gesendet. Nicht sicher warum? Ich exportiere die Funktion dann importiere die Funktion und benutze connect damit ich Zugriff auf die Versandmethode habe. Was vermisse ich? Vielen Dank!

SignIn.js

import React, { Component } from 'react'; 
    import PropTypes from 'prop-types'; 
    import { connect } from 'react-redux'; 
    import { fbAuth, db } from '~/config/firebase/firebaseConfig'; 
    import { getId, getRetailerData } from '~/redux/modules/retailer'; 

    class SignIn extends Component { 
     static propTypes = { 
     dispatch: PropTypes.func.isRequired, 
     push: PropTypes.func.isRequired 
     } 
     constructor(props) { 
     super(props); 

     this.state = { 
      email: '', 
      password: '' 
     }; 

     this.handleEmailChange = this.handleEmailChange.bind(this); 
     this.handlePasswordChange = this.handlePasswordChange.bind(this); 
     this.handleSubmit = this.handleSubmit.bind(this); 
     } 
     handleEmailChange (event) { 
     this.setState({email: event.target.value}); 
     } 
     handlePasswordChange (event) { 
     this.setState({password: event.target.value}); 
     } 
     handleSubmit (event) { 
     event.preventDefault(); 

     const email = this.state.email; 
     const password = this.state.password; 
     // Register user 
     fbAuth.signInWithEmailAndPassword(email, password) 
      .catch((error) => { 
       // Handle Errors here. 
       var errorCode = error.code; 
       var errorMessage = error.message; 
       console.log(errorMessage); 
       // ... 
      }) 
      .then(() => { 
       const user = fbAuth.currentUser; 
       console.log(user); 
       this.props.dispatch(getId(user.uid)); 

       // This action below is not being dispatched 

       this.props.dispatch(getRetailerData()); 
       this.props.push(`/dashboard`); 
      }) 
     } 
     render() { 
     return (
      <form onSubmit={this.handleSubmit}> 
      <div className="form-group"> 
       <label>Email address</label> 
       <input 
       type="email" 
       className="form-control" 
       placeholder="Enter email" 
       onChange={this.handleEmailChange} 
       /> 
      </div> 
      <div className="form-group"> 
       <label>Password</label> 
       <input 
       type="password" 
       className="form-control" 
       placeholder="Password" 
       onChange={this.handlePasswordChange} 
       /> 
      </div> 
      <button className="btn btn-default" type="submit">Continue</button> 
      </form> 
     ); 
     } 
    } 

    export default connect()(SignIn); 

Mein Minderer

const GET_ID = 'GET_ID'; 
    const GET_PRODUCT_IMAGES = 'GET_PRODUCT_IMAGES'; 

    import { db, fbAuth } from '~/config/firebase/firebaseConfig'; 

    const initialState = { 
     uid: '', 
     name: '', 
     productImages: [], 
     inventory: {} 
    } 

    export function getId (id) { 
     return { 
     type: GET_ID, 
     id 
     } 
    } 

    function getProductImages (images) { 
     return { 
     type: GET_PRODUCT_IMAGES, 
     images 
     } 
    } 

    export function getRetailerData() { 
     return (dispatch, getState) => { 
     const user = fbAuth.currentUser; 
     const productImages = db.ref('users/' + user.uid + '/productImages/'); 
     productImages.on('child_added', (data) => { 
      console.log(data.val()); 
      dispatch(getProductImages(data.val())) 
     }); 
     } 
    } 

    export default function retailer (state = initialState, action) { 
     switch (action.type) { 
     case GET_ID : 
      return { 
      ...state, 
      uid: action.id 
      } 
     case GET_PRODUCT_IMAGES : 
      return { 
      ...state, 
      productImages: action.images 
      } 
     default : 
      return state; 
     } 
    } 

Schließlich konnte ich dachte, es hat etwas mit meinem Index.js sein?

Answer 1

Die Art, wie ich normalerweise die Verbindungsmethode mit Aktionen verwende, ist wie folgt.

const mapState = state => ({ 
    propsIWantBoundToReduxStore: store.field, 
}); 

const mapDispatch = { 
    actionMethod, 
//in your case: getRetailerData 
}; 
export default connect(mapState, mapDispatch)(MyComponent); 

Dann könnten Sie this.props.getRetailerData() aufrufen, um die Aktion auszulösen.

meine getRetailerData Methode würde wie folgt aussehen:

export function getRetailerData() { 
    return { 
    type: 'GET_RETAILER_DATA' 
    }; 
}