Redux / React：修改对象的属性答案

【问题标题】：Redux / React: modify a property of an objectRedux / React：修改对象的属性
【发布时间】：2018-08-16 16:55:08
【问题描述】：

我正在尝试修改减速器中“持续时间”属性的值。当我控制台记录个人“合作”时，一切都很好。但是，我无法正确更新我的 newState。

你有什么想法吗？

 export function reducer(state = initialState, action) {

  let newState = [...state];

  switch (action.type) {

   case "SEARCH_PEOPLE":
    newState = initialState;
    let results;
    axios
    .get(`https://maps.googleapis.com/maps/api/distancematrix/json?origins=${origins}&destinations=${destination}&region=FR&key=${config.gmap.key}`)
    .then(res => {
      results = res.data.rows;
      newState = newState.map((collab, i) => {
        return console.log("collab : ", {
          ...collab,
          duration: results[i].elements[0].duration.text
        })
      }
      )
    })
  return newState;

  default:
    break;
  }

 return newState;
}

提前致谢！

【问题讨论】：

这是不正确的方式。您还需要使用 redux 中间件，例如 redux-thunk 、 redux-saga 或您想要的任何其他中间件。这是因为您调用的 API 需要 async 方法，而 redux 在不使用中间件时是同步的。如果您想使用redux-saga 并了解如何实现github.com/sghaleb1/redux-saga-boilerplate，我有样板文件
谢谢！我会看看这个！
我建议查看“redux-axios-middleware”github.com/svrcekmichal/redux-axios-middleware。基本上，它会自动为您添加一个SEARCH_PEOPLE_SUCCESS 操作。

标签： reactjs redux state

【解决方案1】：

这被认为是anti-pattern，你的减速器应该是纯的，应该没有副作用。因此，使用 thunk 将 API 调用放入动作创建者中。

【讨论】：