Question

我试图获取有关用户的一些信息，并在用户登录时将其存储在redux中。我将一个动作发送到uid工作正常。直接在（我已经注释掉SignIn.js代码中的位置）后，我尝试调度一个redux thunk动作，该动作从firebase获取产品图像列表。由于某种原因，此操作不会调度。不知道为什么？我导出函数然后导入函数并使用连接，所以我可以访问调度方法。我错过了什么？谢谢！

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方法与actions一起使用的方式就是这样。

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

Redux Thunk Action未触发

1 个答案: