Question

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

据我所知，我必须发送一个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));
}
...

在减速机中

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将ref保存到每个州。

Answer 1

首先，您应该在componentDidMount而不是componentWillMount中调用您的API。有关详情，请参阅：what is right way to do API call in react js?

当您使用redux存储时，您的组件使用mapStateToProps函数订阅状态更改，并且它们使用通过mapDispatchToProps函数添加了props的操作来更改状态（假设您正在使用这些函数）你的连接电话）。因此，您已经使用道具订阅状态更改。使用回调类似于回调告诉您组件已经知道的由于其道具更改而发生的更改。并且道具的变化将触发重新渲染组件以显示新状态。

更新：在您更改每个字符时触发onChange事件的输入字段引用的情况可能会导致对商店进行大量更新。正如我的评论中所提到的，您可以使用类似_.debounce的api来限制对商店的更新，以减少此类情况下的状态更改次数。有关在Perform debounce in React.js处理此问题的更多信息。

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

规范化状态：http://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html
使用重新选择（https://github.com/reactjs/reselect）
按照Redux github页面中有关性能的文章中提供的建议（https://github.com/reactjs/redux/blob/master/docs/faq/Performance.md）

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

使用redux

1 个答案: