剩余同构取区间

Question

我不太确定下面的解决方案是否最适合，我想知道在操作状态和/或Ajax同构的获取请求时的最佳实践，在这种情况下，是间隔的。

用户模块

import { createAction, handleActions } from 'redux-actions'
import { api } from '../utils/api'

export const REPORT_POSITION_INTERVAL = 'REPORT_POSITION_INTERVAL'
export const CLEAR_POSITION_INTERVAL = 'CLEAR_POSITION_INTERVAL'
export const POSITION_UPDATED = 'POSITION_UPDATED'

export const positionUpdated = createAction(POSITION_UPDATED, (value) => value)
export const setReportPositionInterval = createAction(REPORT_POSITION_INTERVAL, (interval) => interval)
export const clearPositionInterval = createAction(CLEAR_POSITION_INTERVAL)

export const reportPosition = () => {
  return (dispatch, getState) => {
    if (!navigator.geolocation) {
      return
    }

    function success (position) {
      var latitude = position.coords.latitude
      var longitude = position.coords.longitude

      if (getState().user.userId !== null && getState().user.currentCheckup !== null) {
        var data = {
          lat: latitude,
          lng: longitude,
          user_id: getState().user.userId,
          vehicle_id: getState().user.currentCheckup.vehicle_id
        }
        api(dispatch, getState, '/api/positions/add', 'POST', data, positionUpdated)
      }
    }

    function error () {
      alert('error')
    }

    if (getState().user.currentCheckup !== null) {
      var options = {enableHighAccuracy: true}
      navigator.geolocation.getCurrentPosition(success, error, options)
    }
  }
}

export const reportPositionPeriodically = () => {
  return (dispatch, getState) => {
    dispatch(setReportPositionInterval(setInterval(() => {
      dispatch(reportPosition())
    }, 10000)))
  }
}


export const actions = {
  reportPositionPeriodically,
  clearPositionInterval
}


export default handleActions({
  [REPORT_POSITION_INTERVAL]: (state, { payload }) => {
    return {
      ...state, reportPositionInterval: payload
    }
  },
  [CLEAR_POSITION_INTERVAL]: (state, { payload }) => {
    var clearedInterval = clearInterval(state.reportPositionInterval)
    return {
      ...state, reportPositionInterval: clearedInterval
    }
  },
  [POSITION_UPDATED]: (state, { payload }) => {
    return state
  }
}, {reportPositionInterval: null})

从视图中调用reportPositionPeriodically操作。

reportPositionPeriodically()将一个setInterval箭头函数传递给setReportPositionInterval，该函数将间隔保持在状态并运行reportPosition()。

reportPosition调用从utils导入的名为api()的函数。

Utils API

import fetch from 'isomorphic-fetch'
import config from 'config'
export const api = (dispatch, getState, endpoint, method, data, success)
...
fetch(config.api_host + endpoint + query, params).then((response) => {
    dispatch(loaderActions.finished())
    return response.json()
}).then((value) => {
    if (value.message) {
        dispatch(loaderActions.fetchError(value.message))
    }
    if ((value.code !== undefined && value.code >= 200 && value.code <= 300) || (value.success !== undefined && value.success)) {
        dispatch(success(value))
    }
})

为了清除定时器并停止获取请求，我执行对clearPositionInterval()的调用，该调用在状态间隔上运行clearInterval。

我发现redux很难，我很难找到正确的方法。

Answer 1

您的代码非常好，生成的属性键的使用也非常好。

有几件事你可以改进：

从‘./utils/ api’导出const =(分派、getState、端点、方法、数据、成功)导入{ api }

如果您只从模块导出一个项，则应该将其导出为default：

import api from '../utils/api'
export default const api = (dispatch, getState, endpoint, method, data, success)

这是您使用枚举类型的时候：

出口REPORT_POSITION_INTERVAL = 'REPORT_POSITION_INTERVAL‘出口const CLEAR_POSITION_INTERVAL = 'CLEAR_POSITION_INTERVAL’出口POSITION_UPDATED = 'POSITION_UPDATED‘

您可以使用ES6 Map或enumify论npm

Answer 2

它看起来不错，但我只想从api模块中返回承诺，并在redux所在的地方处理错误、成功等等。即在reportPositionPeriodically中

通过这种方式，您的API-模块将变得更小，更可重用，例如：

我发现redux很难，我很难找到正确的方法。

您可以稍后替换它，但是api方法仍然可以工作;)如果这样做，您还可以更好地了解您的状态和您的商店发生了什么