Question

我已经在博物馆展览中展示了一个React应用程序。该应用程序的一个特定部分包含一个调查组件，其中各种选项可由当前正在查看该展览的组投票。当小组提交调查时，投票计数将在我构建的React图形组件内部使用。

最初，此操作向Mongo数据库发送带有一些数据的发布请求。发布后，它会将数据与数据库的最后30天结果相结合，并在React图形组件中使用它。

现在，客户只是希望当前会话中的数据显示在图表中，因此不再需要查询数据库以便在图表中使用数据，我已经将我需要的数据保存在组件级别状态。

但是，我仍然需要将投票结果保存到数据库以进行数据分析。在展览中看到观众不需要知道保存到数据库的数据，我不知道如何编写我的redux动作，因为不需要更新应用程序中的任何状态。如果数据无法保存到数据库，那么就是这样，我不想通知应用程序的查看者任何失败。

所以，暂时，我决定在我的React组件内部创建一个方法，该方法对数据库执行AJAX帖子。

  saveSurveyResults = () => {
    const { options } = this.props
    const { voteCount } = this.state
    let newArr = []

    let i = 0
    let randomId = uuidv4()

    for(let x in voteCount) {
      if(voteCount[x] > 0) {
        newArr.push (
          {
            group_id: randomId,
            option_id: options[i].id,
            option_text: options[i].title,
            count: voteCount[x],
            timestamp: new Date().valueOf()
          }
        )
      }
      i++
    }

    if(newArr.length < 1)
      return this.setState({ error: true })

    axios.post(API_SAVE_SUBMISSION, {
      submissions: newArr
    })
    .then(res => {
        console.log(res.status)
    })
  }

基本上，这个方法以AJAX请求结束，只是假设一切顺利，没有给用户反馈。我觉得这很黑。

我想将我的所有AJAX请求保留在我的组件之外，并让它们全部通过Redux以便将来更新，因为我觉得它更适合这样做。

我目前有一个针对我的Survey组件的reducer，它为一个动作返回一个新状态，当组点击提交调查按钮时会触发该动作。

import { SUBMIT_SURVEY } from '../actions/types'

export default function(state = {}, action) {
  switch(action.type) {
    case SUBMIT_SURVEY:
      return action.payload
  }
  return state
}

以下是组单击按钮时发出的操作。它只是发送一个普通的JavaScript对象，其中每个选项的计票数都计入reducer。

export function submitSurveyResults(votes) {
  return {
    type: SUBMIT_SURVEY,
    payload: votes
  }
}

这是我正在使用的一个简单的自定义中间件，它解决了我的AJAX请求。可能没有必要了解它是如何工作的，但无论如何它都在这里。假设它完美地解析了AJAX请求。

export default function({ dispatch }) {
  return next => action => {

    if(!action.payload || !action.payload.then)
      return next(action)

    action.payload
      .then(function(res) {
        const newAction = { ...action, payload: res }
        dispatch(newAction)
      })
  }
}

重构当前方法的最佳方法是什么，让它流经Redux？我知道这个问题可能看起来很简单，但希望有更多技能的人能够理解我想要做的事情。

这是我在一个动作中有另一个AJAX请求的例子，它运行得很好。

export function getPersonQuestions(personId) {
  const questions = axios.get(`${getUrlFromBody()}ajax_questions?id=${personId}`)

  return {
    type: GET_QUESTIONS,
    payload: questions
  }
}

我想如果我只是发出一个类似于上面的AJAX请求的动作，我只是让我感到困惑，然后让它在我的reducer中返回当前状态，而不返回一个新的状态？

如何处理不需要更改任何状态的操作？

0 个答案: