Question

我正在编写一个利用Redux-Saga进行异步的React Redux Web应用程序。在传奇中，通常会发送2个动作：

1）SAVE_PENDING
2）SAVE_SUCCESS（如果发生错误，则为SAVE_FAILURE）。

这两个动作触发状态中的isSaving属性，从false变为true并返回false。这些变化都发生在不到10毫秒。 Web应用程序使用websockets。

这些状态更改不会导致我们的React组件重新呈现。除Save函数外，所有其他异步函数和状态更改都在DOM中正确反映。我的假设是变化发生得如此之快（9ms），以至于React并不觉得需要重新渲染DOM，因为DOM只会在9ms内不同。

我的redux日志看起来像这样：

action @ 15:30:53.946 @@stuffz/morestuffz/SAVE
action @ 15:30:53.950 @@stuffz/morestuffz/SAVE_PENDING 
action @ 15:30:53.955 @@stuffz/morestuffz/SAVE_SUCCESS

这个假设听起来是否正确？如果是这样，最好的解决方法是什么？我认为只要isSaved保持为真，并在触发新保存时重置它。

编辑：我已经附加了reducer和component的缩短版本。对于减速机，我们使用ImmutableJS和箭头功能来保持整洁。此外，您会注意到我们没有选择单独的容器来将状态和操作映射到道具。在componentWillReceiveProps方法中，如果isSaving从true更新为false，我们将关闭模态并启动通知。感谢您的兴趣到目前为止！

减速机：

const initialState = fromJS({
  isSaving: false,
  error: null,
  tracks: [],
  saves: []
})

export default function(state = initialState, action){
  const { type, payload } = action
  switch (type) {
    case actions.SAVE_SC_TRACKS_PENDING:
      return savePending(state)
    case actions.SAVE_SC_TRACKS_SUCCESS:
      return saveSuccess(state, payload)
    case actions.SAVE_SC_TRACKS_FAILURE:
      return saveFailure(state, payload)
    default:
      return state;
  }
}

const savePending = state => state.set('isSaving', true)
const saveSuccess = (state, payload) => state.set('isSaving', false).set('saves', fromJS(payload.saves))
const saveFailure = (state, payload) => state.set('isSaving', false).set('error', payload)

组件：

const mapStateToProps = state => ({
  user: state.app.socket.get('user'),
  scTracks: state.music.importer.get('scTracks'),
  isFetching: state.music.importer.get('isFetching'),
  isSaving: state.music.importer.get('isSaving'),
  error: state.music.importer.get('error')
})

@connect(mapStateToProps)
@isAuthenticated
export default class Importer extends Component {
  constructor(props, context) {
      super(props, context)
  }
  componentWillReceiveProps(nextProps) {
    // close model and launch notification
    if(this.props.isSaving && !nextProps.isSaving && !nextProps.error) {
      this.props.closeModal()
      $('body').pgNotification({ style: 'bar', message: 'Successfully saved!', type: 'success', position: 'top' }).show();
    }
  }
}

我做了一点挖掘并在成功行动发出之前放了5秒钟，这似乎解决了这个问题。基于此我假设组件没有重新渲染的原因是因为React的该死的好DOM更新。如果有人能解释如何解决这个问题而不会使异步调用变得不必要地慢，我仍然会将问题留给答案。

存储更新是否太快，React无法重新渲染？

0 个答案: