javascript - React-Redux 如何根据成功条件调用新的调度

Question

我已经在这方面研究了一段时间了。看了this问题，但这不是我想要的。

简而言之...我有 const expression = 到一个函数，该函数链接到另一个函数，该函数在单独的文件中对 LoginContainer 进行 API 调用，但在同一文件夹中 -(它称为 reducer.js 但具有操作以及在这个阶段)。如果成功，它会收到一个 token ，并将其保存在本地存储中。这很好用。

在这里。

import { fetch, addTask } from 'domain-task'
import { saveJwt, clearJwt } from '../auth/jwt'
import { handleErrors } from '../utils/http'

const REQUEST_LOGIN_TOKEN = 'REQUEST_LOGIN_TOKEN'
const RECEIVE_LOGIN_TOKEN = 'RECEIVE_LOGIN_TOKEN'
const ERROR_LOGIN_TOKEN = 'ERROR_LOGIN_TOKEN'
const REQUEST_USER = 'REQUEST_USER'
const RECEIVE_USER = 'RECEIVE_USER'
const ERROR_USER = 'ERROR_USER'

// ******************* action
export const requestLoginToken = (username, password) =>
  (dispatch, getState) => {
    dispatch({ type: REQUEST_LOGIN_TOKEN, payload: username })

    const payload = {
      userName: username,
      password: password,
    }

    const task = fetch('/api/jwt', {
      method: 'POST',
      body: JSON.stringify(payload),
      headers: {
        'Content-Type': 'application/json;charset=UTF-8'
      },
    })
      .then(handleErrors)
      .then(response => response.json())
      .then(data => {
        dispatch({ type: RECEIVE_LOGIN_TOKEN, payload: data })
        saveJwt(data)
      })
      .catch(error => {
        clearJwt()
        dispatch({ type: ERROR_LOGIN_TOKEN, payload: error.message })
      })
    addTask(task)
    return task
  }



import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import Login from './Login'
import { requestLoginToken } from './reducer'

class LoginContainer extends Component {
  static contextTypes = {
    router: PropTypes.object.isRequired
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.isAuthorised) {
      this.context.router.push('/')
    }
  }

  submit = (values) => {
    console.log('got values!', values)
    this.props.requestLoginToken(values.username, values.password)
  }

  render() {
    return (
      <Login onSubmit={this.submit} />
    )
  }
}

const mapStateToProps = (state) => ({
  isAuthorised: state.login.isAuthorised,
})
const mapDispatchToProps = (dispatch) => ({
  requestLoginToken: (username, password) => dispatch(requestLoginToken(username, password)),
  //requestSelectData: (values = {}) => dispatch(requestSelectData(values = {})),
})
export default connect(mapStateToProps, mapDispatchToProps)(LoginContainer)

在 loginContainer(上图)中，输入“用户名”和“密码”并单击提交按钮后，将调用表达式“requestLoginToken”。

我的问题

我想根据上述表达式“requestLoginToken”成功将 JWT token 保存到本地存储中来获取大量数据。它现在使用正确的用户名和密码成功地做到了这一点。

我知道我不能使用“.then”从表达式“requestLoginToken”中进行另一个调用，因为它特别需要先检索然后保存 token - 我必须等到它完成才能知道我是否有一个 token 。我需要运行第二个表达式，只有在这个 promise 成功时才会运行，即通过条件语句。 “如果(JWT)等”

1) 谁能告诉我在哪里以及如何添加这个条件语句。我认为它在提交的 Logincontainer 中？ ..我该如何构建条件？

2) 我在哪里以及如何添加 const = 函数来检索数据，例如，如果我将它放在另一个单独的文件中，我是否仍然或者甚至需要在 loginContainer 等的 mapDispatchToProps 中注册它

编辑

采纳 Nate Kimball 的回答并付诸实践。决定将其拆分为自己的名为“selectData”的“const”，我计划在“saveJwt(data)”行下方调用它。

但是我发现我现在收到一个错误:

Unexpected Token , expected

它在下面代码块的最后一行..(右大括号下面有红色)检查了它的语法但无法弄清楚原因。

不过我认为这种方法是正确的。

const selectData = () => {
  dispatch({ type: REQUEST_SELECT_DATA })

  const token = jwt.access_token
  const headers = new Headers({
    'Authorization': `Bearer ${token}`
  })
  const selectData = fetch('/api/SelectData/SelectData', {
    method: 'GET',
    headers,
  })
    .then(handleErrors)
    .then(response => response.json())
    .then(data => {
      dispatch({ type: RECEIVE_SELECT_DATA, payload: data })
        .catch(error => {
          clearJwt()
          dispatch({ type: ERROR_SELECT_DATA, payload: error.message })
        })
    }
}

Answer 1

我看不出有任何理由说明您不能在成功调用后从您的操作中嵌套第二次提取:

export const requestLoginToken = (username, password) =>
  (dispatch, getState) => {
    dispatch({ type: REQUEST_LOGIN_TOKEN, payload: username })

    const payload = {
      userName: username,
      password: password,
    }

    const task = fetch('/api/jwt', {
      method: 'POST',
      body: JSON.stringify(payload),
      headers: {
        'Content-Type': 'application/json;charset=UTF-8'
      },
    })
      .then(handleErrors)
      .then(response => response.json())
      .then(data => {
        dispatch({ type: RECEIVE_LOGIN_TOKEN, payload: data })
        saveJwt(data)
        // Since this is where you receive your login token,
        // You can dispatch an action to acknowledge you're fetching:
        dispatch({ type: SECOND_DATA_FETCHING })
        // This is also where you would make your next call:
        fetch('/api/etc', { ...config })
        .then(response => {
            // You can use your reducer to both inform a successful call &
            // store the received data
            dispatch({ type: SECOND_DATA_SUCCESS, payload: response.data })
        })
        .catch(error => {
            // Let your app know the call was unsuccessful:
            dispatch({ type: SECOND_DATA_FAILED, payload: error.message })
        })

        // Note: if you don't like the nested ugliness, you could optionally
        // put this entire nested fetch chain into a separate action and just 
        // dispatch that when you get your token.
      })
      .catch(error => {
        clearJwt()
        dispatch({ type: ERROR_LOGIN_TOKEN, payload: error.message })
      })
    addTask(task)
    return task
  }

此时，您需要做的就是更新组件中的 mapStateToProps 函数以接收数据和/或第二层获取数据的状态:

// Make sure you have a default status for that second data
// just in case your token call fails. 
const mapStateToProps = (state) => ({
  isAuthorised: state.login.isAuthorised,
  secondData: state.login.secondData,
  secondDataStatus: state.login.secondDataStatus
})