Javascript 使用redux thunk/redux的回调

我正在学习redux是如何工作的，但是要做简单的事情需要很多代码。例如，我想在显示之前从服务器加载一些数据。出于编辑的原因，我不能简单地使用传入的道具，但我必须将道具数据复制到本地州

据我所知，我必须发送一个Fetch_请求操作。如果成功，fetch_success操作将使用新项目更新存储。然后更新的项目将导致我的组件的渲染功能更新

组件中

componentWillMount() {
  this.props.FETCH_REQUEST(this.props.match.params.id);
}
...

this.props.FETCH_REDUCER
// extra code for state, getting desired item from...

componentWillMount() {
  this.props.FETCH_REQUEST(this.props.match.params.id, this.cbSuccess, this.cbFailure);
}
cbSuccess(data) {
  // do something
}
cbFailure(error) {
  // do something
}
...

行动中

export function FETCH_REQUEST(id) {
  api.get(...)
    .then(d => FETCH_SUCCESS(d))
    .catch(e => FETCH_FAILURE(e));
}
...

异径管

export function FETCH_REDUCER(state = {}, action ={}) {
  switch (action.type) {
    case 'FETCH_SUCCESS':
      return { ...state, [action.payload.id]: ...action.payload }
  ...
}

返回组件

componentWillMount() {
  this.props.FETCH_REQUEST(this.props.match.params.id);
}
...

this.props.FETCH_REDUCER
// extra code for state, getting desired item from...

componentWillMount() {
  this.props.FETCH_REQUEST(this.props.match.params.id, this.cbSuccess, this.cbFailure);
}
cbSuccess(data) {
  // do something
}
cbFailure(error) {
  // do something
}
...

相反，我可以调用react thunk函数并传递一些回调函数吗？react thunk可以更新存储，回调可以更改组件的本地状态

组件中

componentWillMount() {
  this.props.FETCH_REQUEST(this.props.match.params.id);
}
...

this.props.FETCH_REDUCER
// extra code for state, getting desired item from...

componentWillMount() {
  this.props.FETCH_REQUEST(this.props.match.params.id, this.cbSuccess, this.cbFailure);
}
cbSuccess(data) {
  // do something
}
cbFailure(error) {
  // do something
}
...

行动中

export function FETCH_REQUEST(id, cbSuccess, cbFailure) {
  api.get(...)
    .then(d => {
      cbSuccess(d);
      FETCH_SUCCESS(d);
    }).catch(e => {
      cbFailure(d);
      FETCH_FAILURE(e);
    });
}
...

这不合适吗？我可以用redux observable做同样的事情吗？

---

更新1

---

我几乎将所有内容都移动到了redux存储中，即使是编辑（即将

this.setState

替换为

this.props.setState

）。它简化了国家管理。然而，每当任何输入的onChange触发时，就会出现一个新的状态有人能确认这是否正常吗？我担心应用程序的内存管理，因为redux会保存每个状态的引用。

首先，你应该在

componentDidMount

中调用API，而不是

componentWillMount

。更多信息，请访问：

使用redux存储时，组件使用

MapStateTrops

函数订阅状态更改，并使用通过

mapDispatchToProps

函数添加的操作更改状态（假设您在连接调用中使用这些函数）。 因此，您已经在使用道具订阅状态更改。使用回调类似于让回调告诉您组件已经知道的更改，因为它的道具发生了更改。道具的改变将触发组件的重新渲染以显示新状态

更新： 您提到的输入字段在每个字符发生更改时触发onChange事件的情况可能会导致存储大量更新。正如我在评论中提到的，您可以使用像u.debounce这样的api来限制对存储的更新，以减少这种情况下状态更改的数量。更多关于如何处理这个问题

在使用Redux时，内存管理问题在实际应用程序中是一个真正的问题。减少状态重复更新影响的方法是

规范化状态的形状：

使用重新选择（）创建记忆选择器

遵循文章中关于Redux github页面性能的建议（）

---

还要记住，虽然应该复制整个状态以防止发生变异，但只需要更新更改的状态片段。例如，如果您的状态包含10个对象，但其中只有一个对象发生了更改，则需要更新状态中新对象的引用，但其余9个未更改的对象仍指向旧引用，并且内存中的对象总数为11而不是20（不包括环绕状态对象）

如果我想编辑从FETCH_REDUCER收到的数据，输入的onChange不是必须为每个字符更改发送一个操作吗？这不是因为克隆而造成的内存浪费吗？我的想法是将FETCH_REDUCER的数据复制到本地状态，在本地进行更改，然后发送一个操作来更新存储。我同意你的观点。公认的解决方法是使用像u.debounce这样的函数来限制onChange函数对api的调用。类似于@julien在