Question

在下面的代码中，我无法弄清楚{getFirebase}参数的来源是传递给读取内容的行...

return (dispatch, getState, {getFirebase}) => {

如果您在下面的代码（我将在上下文中发布）中无法确定其来源，请在您的答案中说明其他有用的见解，然后我将接受您的答案并提出其他问题带有更多上下文代码。

这里有更多用于上下文的代码。

authActions.js

export const signIn = (credentials) => {
  return (dispatch, getState, {getFirebase}) => { // <- this is the line in question
    const firebase = getFirebase();

    firebase.auth().signInWithEmailAndPassword(
      credentials.email,
      credentials.password
    ).then(() => {
      dispatch({ type: 'LOGIN_SUCCESS' });
    }).catch((err) => {
      dispatch({ type: 'LOGIN_ERROR', err });
    });

  }
}

export const signOut = () => {
  return (dispatch, getState, {getFirebase}) => {
    const firebase = getFirebase();

    firebase.auth().signOut().then(() => {
      dispatch({ type: 'SIGNOUT_SUCCESS' })
    });
  }
}

export const signUp = (newUser) => {
  return (dispatch, getState, {getFirebase, getFirestore}) => {
    const firebase = getFirebase();
    const firestore = getFirestore();

    firebase.auth().createUserWithEmailAndPassword(
      newUser.email, 
      newUser.password
    ).then(resp => {
      return firestore.collection('users').doc(resp.user.uid).set({
        firstName: newUser.firstName,
        lastName: newUser.lastName,
        initials: newUser.firstName[0] + newUser.lastName[0]
      });
    }).then(() => {
      dispatch({ type: 'SIGNUP_SUCCESS' });
    }).catch((err) => {
      dispatch({ type: 'SIGNUP_ERROR', err});
    });
  }
}

SignIn.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { signIn } from '../../store/actions/authActions'
import { Redirect } from 'react-router-dom'

class SignIn extends Component {
  state = {
    email: '',
    password: ''
  }
  handleChange = (e) => {
    this.setState({
      [e.target.id]: e.target.value
    })
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.signIn(this.state)
  }
  render() {
    const { authError, auth } = this.props;
    if (auth.uid) return <Redirect to='/' /> 
    return (
      <div className="container">
        <form className="white" onSubmit={this.handleSubmit}>
          <h5 className="grey-text text-darken-3">Sign In</h5>
          <div className="input-field">
            <label htmlFor="email">Email</label>
            <input type="email" id='email' onChange={this.handleChange} />
          </div>
          <div className="input-field">
            <label htmlFor="password">Password</label>
            <input type="password" id='password' onChange={this.handleChange} />
          </div>
          <div className="input-field">
            <button className="btn pink lighten-1 z-depth-0">Login</button>
            <div className="center red-text">
              { authError ? <p>{authError}</p> : null }
            </div>
          </div>
        </form>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return{
    authError: state.auth.authError,
    auth: state.firebase.auth
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    signIn: (creds) => dispatch(signIn(creds))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(SignIn)

Answer 1

redux-thunk middleware支持defining an "extra argument"：

const store = createStore(
  reducer,
  applyMiddleware(thunk.withExtraArgument(api))
)

// later
function fetchUser(id) {
  return (dispatch, getState, api) => {
    // you can use api here
  }
}

因此，请检查您正在使用的应用程序或示例的商店设置逻辑，您将看到它正在创建thunk中间件的自定义版本，其对象类似于{ {1}}。然后将该对象传递给应用程序中的所有thunk函数。

Answer 2

例如函数pry：

这将返回一个带有三个参数的匿名函数。最后一个参数是一个对象。匿名函数使用带有该对象的键df['shares'] = df.groupby('product')['revenue'].apply(lambda x: x/ x.sum()) In [898]: df Out[898]: product revenue shares 0 A 10 0.2 1 A 20 0.4 2 A 20 0.4 3 B 0 0.0 4 B 50 0.5 5 B 50 0.5 6 C 0 0.0 7 C 0 0.0 8 C 30 1.0和signUp的值。

因此getFirebase的值必须由getFirestore返回的匿名函数的调用者给定。

getFirebase

在匿名函数中，变量signUp现在具有值var f = signUp("John Doe"); f(x => ..., x => ..., {getFirebase: value1, getFirestore: value2})，变量getFirebase现在具有值value1。从代码中可以看到，getFirestore和value2必须是函数。

这个函数参数从哪里来？

2 个答案: