Redux Thunk动作未触发

Question

我试图获取有关用户的一些信息，并在用户登录时将其存储在redux中。我向uid分配了一个操作，该操作正常。 在之后（我已经注释掉了SignIn.js代码中的何处），我立即尝试调度redux thunk操作，该操作从firebase获取产品图像列表。 由于某种原因，此操作未调度。 不知道为什么吗？ 我导出函数，然后导入函数并使用connect，这样我就可以访问dispatch方法。 我想念什么？ 谢谢！

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);

我的减速机

    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;
      }
    }

最后，我想我的Index.js可能有问题吗？

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { App } from '~/containers';
    import { createStore, applyMiddleware, combineReducers, compose } from 
    'redux'; 
    import { Provider } from 'react-redux';
    import thunk from 'redux-thunk';
    import './index.css';
    import * as reducers from './redux';

    const store = createStore(
      combineReducers(reducers),
      compose(
        applyMiddleware(thunk),
        window.devToolsExtension ? window.devToolsExtension() : f => f
      )
    );

    ReactDOM.render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('root')
    );

Answer 1

我通常将connect方法与操作一起使用的方式是这样的。

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

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

然后，您可以调用this.props.getRetailerData（）触发操作。

我的getRetailerData方法看起来像这样：

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