Reactjs 对使用react和redux的auth0锁示例感到困惑_Reactjs_Redux_Auth0

Reactjs 对使用react和redux的auth0锁示例感到困惑

reactjs redux

Reactjs 对使用react和redux的auth0锁示例感到困惑,reactjs,redux,auth0,Reactjs,Redux,Auth0,我正在浏览auth0示例项目，了解如何在登录场景中使用react、redux和auth0。然而，我对这个特殊的例子有点困惑，在这个例子中我们调用this.props.doAuthentication（）下面是动作定义 // actions.js ... const lock = new Auth0Lock('YOUR_CLIENT_ID', 'YOUR_CLIENT_DOMAIN'); export function login() { // display lock widget

我正在浏览auth0示例项目，了解如何在登录场景中使用react、redux和auth0。然而，我对这个特殊的例子有点困惑，在这个例子中我们调用

this.props.doAuthentication（）

下面是动作定义

// actions.js

...

const lock = new Auth0Lock('YOUR_CLIENT_ID', 'YOUR_CLIENT_DOMAIN');

export function login() {
  // display lock widget
  return dispatch => {
    lock.show();
  }
}

// Listen to authenticated event and get the profile of the user
export function doAuthentication() {
    return dispatch => {
      lock.on("authenticated", function(authResult) {
            lock.getProfile(authResult.idToken, function(error, profile) {

              if (error) {
                // handle error
                return dispatch(lockError(error))
              }

              localStorage.setItem('profile', JSON.stringify(profile))
              localStorage.setItem('id_token', authResult.idToken)
              return dispatch(lockSuccess(profile))
            });
      });
    }
}

...

我是redux的新手，所以也许这是一个显而易见的答案，但是

doAuthentication绑定到App.js中的道具的位置？假设App.js是顶级根应用程序组件

doAuthentication不生成需要分派参数的函数吗？为什么我们不使用doAuthentication（）返回的函数在构造函数中执行任何操作？如果我们不将返回的函数分配给任何对象，

this.props.doAuthentication

是否会保留任何对象或产生任何效果？它不应该类似于

doAuthentication（）（someDispatchFunction）

这个分派函数来自哪里

1.doAuthentication绑定到App.js中的道具的位置？假设App.js是顶级根应用程序组件

Ans: 动作

doAuthentication

通过调用的中间件与

App

组件的

props

绑定

上面的两行代码可以为您的应用程序完成这项工作。请阅读为什么需要使用

redux thunk

2.doAuthentication不生成需要分派参数的函数吗？为什么我们不使用doAuthentication（）返回的函数在构造函数中执行任何操作？如果我们没有将返回的函数分配给任何对象，那么this.props.doAuthentication是否会保留任何对象或产生任何影响？它不应该类似于doAuthentication（）（someDispatchFunction）吗？这个分派函数来自哪里

Ans: 2.1是的，

doAuthentication

函数返回的函数期望

dispatch

方法作为第一个参数

2.2，2.3此处，

doAuthentication

操作创建者的工作是创建一个

Redux操作

，该操作只侦听名为

authenticated

的事件。当我们调用doAuthentication action creator时，它返回一个

Redux action

函数，该函数接受

dispatch

方法作为第一个参数，接受

getState

方法作为第二个参数。参数将由

redux thunnk

中间件传递

redux-thunk

中间件将调用从

doAuthentication

调用返回的redux操作，因为它是

connet

-ed。否则，我们必须按如下所示调度

doAuthentication

返回的操作

this.props.dispatch(doAuthentication())

2.4，我们可以按照你提到的<代码> doAudioCuto（）（某些Debug函数）< /C> >，但是考虑这个引用

如果启用了Redux Thunk中间件，则在尝试分派一个函数而不是一个动作对象，中间件将使用dispatch方法本身作为第一个参数调用该函数

而且，你可以通过这个

redux thunk

找到详细信息。doAuthentication绑定到App.js中的道具在哪里？假设App.js是顶级根应用程序组件