javascript - 使用 redux-thunk/redux-observable 和 redux 的回调

Question

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

据我所知，我必须发送一个 Fetch_request 操作。如果成功，fetch_success 操作将用新项目更新商店。然后更新的项目将导致我的组件的渲染功能更新。

在组件中

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

在行动中

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

在 reducer 中

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

返回组件

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

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

在组件中

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 为每个状态保存一个引用，我担心应用程序的内存管理。

Answer 1

首先，您应该在 componentDidMount 而不是 componentWillMount 中调用您的 API。有关更多信息，请访问:what is right way to do API call in react js?

当您使用 redux store 时，您的组件使用 mapStateToProps 函数订阅状态更改，并且它们使用通过 mapDispatchToProps 函数添加 Prop 的操作更改状态(假设您正在连接调用中使用这些功能)。 所以你已经在使用你的 Prop 订阅状态变化。使用回调类似于让回调告诉您组件已经知道的更改，因为它的 props 发生了变化。 Prop 的变化将触发组件的重新渲染以显示新状态。

更新: 您提到的输入字段在每个字符发生变化时触发 onChange 事件的情况，可能会导致对商店进行大量更新。正如我在评论中提到的，您可以使用 _.debounce 之类的 api 来限制对商店的更新，以减少这种情况下状态更改的次数。在 Perform debounce in React.js 了解更多关于处理这个的信息.

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

1. 标准化状态的形状:http://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html
2. 使用 Reselect ( https://github.com/reactjs/reselect ) 创建记忆化选择器
3. 遵循文章中提供的有关 Redux github 页面性能的建议 (https://github.com/reactjs/redux/blob/master/docs/faq/Performance.md)

还要记住，虽然应该复制整个状态以防止变异，但只有发生变化的状态片需要更新。例如，如果你的状态持有 10 个对象，只有其中一个发生变化，你需要更新状态中新对象的引用，但其余 9 个未更改的对象仍然指向旧引用和你的对象总数内存是 11 而不是 20(不包括包含状态对象。)