Question

我正在查看auth0示例项目，以便在登录方案here中使用react，redux和auth0。但是，我对这个特殊的例子感到有点困惑，我们称之为this.props.doAuthentication()

// App.js
import { loginUser, fetchQuote, doAuthentication, fetchSecretQuote } from '../actions'

// add a constructor
constructor(props) {
    super(props)
    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（）返回的函数在构造函数中做任何事情？如果我们不将返回的函数分配给任何东西，this.props.doAuthentication是否会持续存在或产生任何影响？不应该像doAuthentication()(someDispatchFunction)这样的派遣功能来自哪里？

Answer 1

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

<强>答：行动doAuthentication使用名为redux-thunk的中间件与props App组件绑定。

let createStoreWithMiddleware = applyMiddleware(thunkMiddleware, api)(createStore)

let store = createStoreWithMiddleware(quotesApp)

以上两行代码将为您完成。阅读here为什么需要redux-thunk。

2.不执行身份验证会生成一个需要调度参数的函数吗？为什么我们不使用doAuthentication（）返回的函数在构造函数中做任何事情？如果我们不将返回的函数分配给任何东西，this.props.doAuthentication是否会持久存在或有任何影响？不应该像doAuthentication（）（someDispatchFunction）这个调度函数来自哪里？

<强>答： 2.1是的，doAuthentication函数返回的函数需要dispatch方法作为第一个参数。

2.2,2.3这里doAuthentication动作创建者的工作是创建一个Redux action，它只会监听名为authenticated的事件。当我们调用doAuthentication action creator时，它会返回Redux action函数，该函数接受dispatch方法作为第一个参数，getState方法作为第二个参数。参数将由redux-thunnk中间件传递。

redux-thunk中间件将调用从doAuthentication调用返回的redux操作，因为它是connet - ed。否则，我们必须发送doAuthentication返回的操作，如下所示，

this.props.dispatch(doAuthentication())

2.4我们可以提及doAuthentication()(someDispatchFunction)，但请考虑此引用

如果启用了Redux Thunk中间件，则无论何时尝试调度函数而不是动作对象，中间件会用调度方法本身作为第一个参数调用该函数。

并且，您可以使用此answer

找到有关redux-thunk的详细信息

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

1 个答案: