使用 redux-thunk / redux-observable 和 redux 的回調

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 為每個狀態保存了一個引用，我擔心應用程序的內存管理。

Answer 1

首先，您應該在componentDidMount而不是componentWillMount調用您的 API。 有關更多信息，請訪問： 在 react js 中進行 API 調用的正確方法是什么？

當您使用 redux 存儲時，您的組件使用mapStateToProps函數訂閱狀態更改，並且它們使用通過mapDispatchToProps函數添加的操作更改狀態（假設您在連接調用中使用這些函數）。 因此，您已經在使用道具訂閱狀態更改。 使用回調類似於讓回調告訴您由於其 props 的更改而您的組件已經知道的更改。 props 的變化會觸發組件的重新渲染以顯示新狀態。

更新：您提到的情況，輸入字段在每個字符更改時觸發 onChange 事件，可能會導致對存儲的大量更新。 正如我在評論中提到的，您可以使用 _.debounce 之類的 api 來限制對商店的更新，以減少這種情況下的狀態更改次數。 更多關於在 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 )

還要記住，雖然應該復制整個狀態以防止變異，但只有更改的狀態片需要更新。 例如，如果你的 state 持有 10 個對象，其中只有一個發生變化，你需要更新 state 中新對象的引用，但其余 9 個未更改的對象仍然指向舊引用和你的對象總數內存是 11 而不是 20（不包括包含狀態對象。）