Javascript Redux-返回调用函数信息以更新道具/状态

我是React的中级开发人员，我想了解在reducer中使用SET_状态更新道具的最佳实践

这是我的文件命名法：

redux/
├── events/
│   ├── reducer.js
│   ├── actions.js
│   ├── sagas.js
├── services/
│   ├── events.js

import { notification } from 'antd'

const axios = require('axios')

export function updateEvent(value) {
  axios.put(`http://api.xxxx.xx/xx/xxxx/events/event/${value.id}/`, value, {
    headers: {
      Authorization: `Token ${localStorage.getItem('auth_token')}`,
    },
  })
    .then(response => {
      return response.data
    })
    .catch(function(error) {
      notification.error({
        message: error.code,
        description: error.message,
      })
    })
}

export function addEventLogistic(value) {
  axios.post(`http://api.xxxx.xx/xx/xxxx/events/logistic/`, value, {
    headers: {
      Authorization: `Token ${localStorage.getItem('auth_token')}`,
    },
  })
    .then(response => {
      return response.data
    })
    .catch(function(error) {
      notification.error({
         message: error.code,
         description: error.message,
      })
    })
}

export default async function defaulFunction() {
  return true
}

当我在sagas.js中分派一个操作时，action函数调用events.js中调用API的另一个函数。 我想在每次修改后更新我网页的道具top revent重载

现在，当我使用yield call（…）[在sagas.js中]调用events.js中的函数时，我总是在返回API响应数据时收到未定义的

我希望收到此信息，以便在我的reducer中调用我的SET_STATE操作来更新它，而无需重新登录

这是我的文件：

redux/
├── events/
│   ├── reducer.js
│   ├── actions.js
│   ├── sagas.js
├── services/
│   ├── events.js

import { notification } from 'antd'

const axios = require('axios')

export function updateEvent(value) {
  axios.put(`http://api.xxxx.xx/xx/xxxx/events/event/${value.id}/`, value, {
    headers: {
      Authorization: `Token ${localStorage.getItem('auth_token')}`,
    },
  })
    .then(response => {
      return response.data
    })
    .catch(function(error) {
      notification.error({
        message: error.code,
        description: error.message,
      })
    })
}

export function addEventLogistic(value) {
  axios.post(`http://api.xxxx.xx/xx/xxxx/events/logistic/`, value, {
    headers: {
      Authorization: `Token ${localStorage.getItem('auth_token')}`,
    },
  })
    .then(response => {
      return response.data
    })
    .catch(function(error) {
      notification.error({
         message: error.code,
         description: error.message,
      })
    })
}

export default async function defaulFunction() {
  return true
}

reducer.js

import actions from './actions'

const initialState = {
  uniqueEvent: {},
  logistic: []
}

export default function eventsReducer(state = initialState, action) {
  switch (action.type) {
    case actions.SET_STATE:
    {
      return { ...state, ...action.payload }
    }
    default:
      return state
  }
}

const actions = {
  SET_STATE: 'events/SET_STATE',
  UPDATE_EVENT: 'events/UPDATE_EVENT',
  ADD_EVENT_LOGISTIC: 'events/ADD_EVENT_LOGISTIC',
}

export default actions

import { all, takeEvery, put, call } from 'redux-saga/effects'
import { pdateEvent, addEventLogistic } from 'services/events'
import actions from './actions'


export function* UPDATE_EVENT({ payload: { event } }) {
  console.log(JSON.stringify(`UPDATE_EVENT`))

  const upEvent = yield call(updateEvent, event)
  if(upEvent){
    yield put({
        type: 'events/SET_STATE',
        payload: {
          uniqueEvent: upEvent,
        },
      })
  } else {
     console.log(JSON.stringify('REDUX UPDATE_EVENT NOT DONE'))
   }
}

export function* ADD_EVENT_LOGISTIC({ payload: { activist, information, eventId } }) {
  console.log(JSON.stringify(`ADD_EVENT_LOGISTIC`))

  const logisticToAdd = {user: activist, description: information, event: eventId}

  const eventLogistic = yield call(addEventLogistic, logisticToAdd)
  if (eventLogistic) {
    yield put({
        type: 'events/SET_STATE',
        payload: {
          logistic: eventLogistic,
        },
      })
  } else {
    console.log(JSON.stringify('REDUX EVENT LOGISTIC NOT DONE'))
  }
}

export default function* rootSaga() {
  yield all([
    takeEvery(actions.UPDATE_EVENT, UPDATE_EVENT),
    takeEvery(actions.ADD_EVENT_LOGISTIC,ADD_EVENT_LOGISTIC),
  ])
}

actions.js

import actions from './actions'

const initialState = {
  uniqueEvent: {},
  logistic: []
}

export default function eventsReducer(state = initialState, action) {
  switch (action.type) {
    case actions.SET_STATE:
    {
      return { ...state, ...action.payload }
    }
    default:
      return state
  }
}

const actions = {
  SET_STATE: 'events/SET_STATE',
  UPDATE_EVENT: 'events/UPDATE_EVENT',
  ADD_EVENT_LOGISTIC: 'events/ADD_EVENT_LOGISTIC',
}

export default actions

import { all, takeEvery, put, call } from 'redux-saga/effects'
import { pdateEvent, addEventLogistic } from 'services/events'
import actions from './actions'


export function* UPDATE_EVENT({ payload: { event } }) {
  console.log(JSON.stringify(`UPDATE_EVENT`))

  const upEvent = yield call(updateEvent, event)
  if(upEvent){
    yield put({
        type: 'events/SET_STATE',
        payload: {
          uniqueEvent: upEvent,
        },
      })
  } else {
     console.log(JSON.stringify('REDUX UPDATE_EVENT NOT DONE'))
   }
}

export function* ADD_EVENT_LOGISTIC({ payload: { activist, information, eventId } }) {
  console.log(JSON.stringify(`ADD_EVENT_LOGISTIC`))

  const logisticToAdd = {user: activist, description: information, event: eventId}

  const eventLogistic = yield call(addEventLogistic, logisticToAdd)
  if (eventLogistic) {
    yield put({
        type: 'events/SET_STATE',
        payload: {
          logistic: eventLogistic,
        },
      })
  } else {
    console.log(JSON.stringify('REDUX EVENT LOGISTIC NOT DONE'))
  }
}

export default function* rootSaga() {
  yield all([
    takeEvery(actions.UPDATE_EVENT, UPDATE_EVENT),
    takeEvery(actions.ADD_EVENT_LOGISTIC,ADD_EVENT_LOGISTIC),
  ])
}

sagas.js

import actions from './actions'

const initialState = {
  uniqueEvent: {},
  logistic: []
}

export default function eventsReducer(state = initialState, action) {
  switch (action.type) {
    case actions.SET_STATE:
    {
      return { ...state, ...action.payload }
    }
    default:
      return state
  }
}

const actions = {
  SET_STATE: 'events/SET_STATE',
  UPDATE_EVENT: 'events/UPDATE_EVENT',
  ADD_EVENT_LOGISTIC: 'events/ADD_EVENT_LOGISTIC',
}

export default actions

import { all, takeEvery, put, call } from 'redux-saga/effects'
import { pdateEvent, addEventLogistic } from 'services/events'
import actions from './actions'


export function* UPDATE_EVENT({ payload: { event } }) {
  console.log(JSON.stringify(`UPDATE_EVENT`))

  const upEvent = yield call(updateEvent, event)
  if(upEvent){
    yield put({
        type: 'events/SET_STATE',
        payload: {
          uniqueEvent: upEvent,
        },
      })
  } else {
     console.log(JSON.stringify('REDUX UPDATE_EVENT NOT DONE'))
   }
}

export function* ADD_EVENT_LOGISTIC({ payload: { activist, information, eventId } }) {
  console.log(JSON.stringify(`ADD_EVENT_LOGISTIC`))

  const logisticToAdd = {user: activist, description: information, event: eventId}

  const eventLogistic = yield call(addEventLogistic, logisticToAdd)
  if (eventLogistic) {
    yield put({
        type: 'events/SET_STATE',
        payload: {
          logistic: eventLogistic,
        },
      })
  } else {
    console.log(JSON.stringify('REDUX EVENT LOGISTIC NOT DONE'))
  }
}

export default function* rootSaga() {
  yield all([
    takeEvery(actions.UPDATE_EVENT, UPDATE_EVENT),
    takeEvery(actions.ADD_EVENT_LOGISTIC,ADD_EVENT_LOGISTIC),
  ])
}

和my events.js（api调用）：

redux/
├── events/
│   ├── reducer.js
│   ├── actions.js
│   ├── sagas.js
├── services/
│   ├── events.js

import { notification } from 'antd'

const axios = require('axios')

export function updateEvent(value) {
  axios.put(`http://api.xxxx.xx/xx/xxxx/events/event/${value.id}/`, value, {
    headers: {
      Authorization: `Token ${localStorage.getItem('auth_token')}`,
    },
  })
    .then(response => {
      return response.data
    })
    .catch(function(error) {
      notification.error({
        message: error.code,
        description: error.message,
      })
    })
}

export function addEventLogistic(value) {
  axios.post(`http://api.xxxx.xx/xx/xxxx/events/logistic/`, value, {
    headers: {
      Authorization: `Token ${localStorage.getItem('auth_token')}`,
    },
  })
    .then(response => {
      return response.data
    })
    .catch(function(error) {
      notification.error({
         message: error.code,
         description: error.message,
      })
    })
}

export default async function defaulFunction() {
  return true
}

我希望events.js中的addEventLogstic（）函数从请求中返回JSON（我做了一些测试，结果很好），但在sagas.js中，使用yield call（…）声明的变量没有得到任何值（而我希望API的JSON）

你有什么想法吗？

---

非常感谢您宝贵的帮助

我怀疑是您的updateEvent和addEventLogistic函数没有返回任何内容。添加return语句，以便执行以下操作：

export function updateEvent(value) {
  //added return statement here
  return axios.put(`http://api.xxxx.xx/xx/xxxx/events/event/${value.id}/`, value, {
    headers: {
      Authorization: `Token ${localStorage.getItem('auth_token')}`,
    },
  })
    .then(response => {
      return response.data
    })
    .catch(function(error) {
      notification.error({
        message: error.code,
        description: error.message,
      })
    })
}

---

您可以尝试：

export function updateEvent（value）{return axios.put（

和

export function addEventLogistic（value）{return axios.post

？这两个api函数都不返回任何内容，因此在调用它们时不能期望返回值。是的，这很好