Redux thunk 函数未运行

Question

我有一个返回 redux thunk 异步函数的函数。问题是它没有开火。 createUser 函数正在运行，因为它内部的第一个 console.log 语句正在运行，但 redux thunk 函数内部的语句没有运行。我不完全确定为什么？对我可以尝试的事情有什么想法吗？这同样适用于我的 react-native 应用程序，所以不知道为什么它在这里不起作用。

这是createUser 函数。

export function createUser (userData) {

  console.log('Getting here?')

  return function (dispatch, getState) {
    dispatch(authenticating());

    console.log('But are you getting heeeere?')

    const email = userData.email;
    const password = userData.password;

    firebaseAuth.createUserWithEmailAndPassword(email, password).catch((error) => {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
      console.log(errorMessage);
    }).then(() => {
      const user = firebaseAuth.currentUser;

      db.ref('/users/' + user.uid).set({
        username: userData.username,
        displayName: userData.displayName,
        uid: user.uid
      })
      dispatch(isAuthed());

    }).catch((error) => {
      console.warn('Error in createUser callback', error)
    });
  }
}

还有我的设置

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

const store = createStore(
  combineReducers(reducers),
  applyMiddleware(thunk)
)

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

最后，这是我分派的 SignUp 组件。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { createUser } from '~/redux/modules/authentication';
import './SignUp.css';

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

    this.state = {
      username: '',
      displayName: '',
      email: '',
      password: '',
      confirmPasswordText: ''
    }
  }
  handleUsernameChange = (event) => {
    this.setState({username: event.target.value});
  }
  handleDisplayNameChange = (event) => {
    this.setState({displayName: event.target.value});
  }
  handleEmailChange = (event) => {
    this.setState({email: event.target.value});
  }
  handlePasswordChange = (event) => {
    this.setState({password: event.target.value});
  }
  handleConfirmPasswordChange = (event) => {
    this.setState({confirmPasswordText: event.target.value});
  }
  stopDefault = (event) => {
    event.preventDefault();
    createUser(this.state);
  }
  render () {
    return (
      <div className="sign-up">
        <div>
          <h1>Nimbus</h1>
        </div>
        <form onSubmit={this.props.dispatch(this.stopDefault())}>
          <div className="form-group">
            <label>Username</label>
            <input
              type="text"
              className="sign-up__input form-control"
              id="formGroupExampleInput"
              placeholder="Choose a username"
              onChange={this.handleUsernameChange}
            />
          </div>
          <div className="form-group">
            <label>Display Name</label>
            <input
              type="text"
              className="sign-up__input form-control"
              id="formGroupExampleInput2"
              placeholder="Choose a display name"
              onChange={this.handleDisplayNameChange}
            />
          </div>
          <div className="form-group">
            <label>Email</label>
            <input
              type="email"
              className="sign-up__input form-control"
              id="formGroupExampleInput3"
              placeholder="Enter your email address"
              onChange={this.handleEmailChange}
            />
          </div>
          <div className="form-group">
            <label>Password</label>
            <input
              type="password"
              className="sign-up__input form-control"
              id="formGroupExampleInput4"
              placeholder="Password"
              onChange={this.handlePasswordChange}
            />
          </div>
          <div className="form-group">
            <label>Confirm password</label>
            <input
              type="password"
              className="sign-up__input form-control"
              id="formGroupExampleInput4"
              placeholder="Password"
              onChange={this.handleConfirmPasswordChange}
            />
          </div>
          <button type="submit" className="sign-up__button btn btn-
primary btn-lg">Sign Up</button>
        </form>
      </div>
    );
  }
}

export default connect()(SignUp);

Answer 1

您需要使用从 react-redux 导入的 connect 函数，以使组件可以使用 createUser 函数作为道具，而不是直接使用导入的函数。如果你不这样做，那么你调用的函数没有连接到你的 redux 存储，所以返回的函数（thunky 函数）不会被执行。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { createUser } from '~/redux/modules/authentication';
import './SignUp.css';

class SignUp extends Component {
    static propTypes {
        createUser: React.PropTypes.func.isRequired
    }

    stopDefault = (event) => {
        event.preventDefault();
        this.props.createUser(this.state);
    }

    // Rest of component
}

const mapStateToProps = null;
const mapDispatchToProps = {
    createUser
}

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

Answer 2

调用 redux 函数时需要使用dispatch。

通过使用 connect 你得到dispatch 作为一个道具，所以你可以调用this.props.dispatch(createUser(this.state))

或者，connect 接受 mapDispatchToProps，就像它说的那样，将调度映射到您传入的道具。

如果您这样做：connect({}, { createUser })，那么您将有 createUser 可供您使用：this.props.createUser(this.state)