Reactjs 使用React Redux显示Snackbar

首先，我是一个全新的反应和重复

每当我发送事件时，我都无法将

材质ui

中的

Snackbar

显示为通知面板

有关我的示例，请参见模型代码。通知不会以这种方式显示，因为当API调用成功时，

App

组件中的

this.props.sending

会立即设置为

false

现在，如果我跳过

已完成的任务

调度，一切似乎都正常。由于我的

onRequestClose

功能，

Notification

组件的

state.open

设置为

false

，但是由于my

应用程序中的
this.props.sending
组件仍然设置为
true
，因此每当
应用程序重新呈现时，它都会显示通知

你知道我该如何正确实施吗？

我有一个
动作
，看起来像这样

const doSomething = (data) => {
  return dispatch => {
    dispatch({
      type: 'SOMETHING_PENDING',
      payload: { data }
    })

    apiCall.then((complete) => {
      dispatch({
        type: 'SOMETHING_FULFILLED',
        payload: { data }
      })
    })
  }
}

const initialState = {
  sending: false
}

const SomeReducer = (state=initialState, action) => {
  switch (action.type) {
    case 'SOMETHING_PENDING': {
      return {
        ...state,
        sending: action.payload
      }
    }

    case 'SOMETHING_FULFILLED': {
      return {
        ...state,
        sending: false
      }
    }

    default: {
      return state
    }
  }
}

export default SomeReducer

我的
减速机
看起来像这样

const doSomething = (data) => {
  return dispatch => {
    dispatch({
      type: 'SOMETHING_PENDING',
      payload: { data }
    })

    apiCall.then((complete) => {
      dispatch({
        type: 'SOMETHING_FULFILLED',
        payload: { data }
      })
    })
  }
}

const initialState = {
  sending: false
}

const SomeReducer = (state=initialState, action) => {
  switch (action.type) {
    case 'SOMETHING_PENDING': {
      return {
        ...state,
        sending: action.payload
      }
    }

    case 'SOMETHING_FULFILLED': {
      return {
        ...state,
        sending: false
      }
    }

    default: {
      return state
    }
  }
}

export default SomeReducer

我的
应用程序
组件已连接到商店

import React, { Component } from 'react'
import { connect } from 'react-redux'

const storeData = (store) => {
  const data = {
    sending: store.Reducer.sending
  }

  return data
}

class App extends Component {
  render() {
    return (
      <Notification sending={this.props.sending} />
    )
  }
}

export default connect(storeData)(App)

如果我没看错的话，听起来你的Snackbar工作正常，但是关闭得太快了。您希望它显示出来，但在4秒后自动关闭，即使API调用本身只花了.5秒。对吗？如果是这样，我相信您可以在
状态.open
从true更改为false时跳过重新渲染组件（但在从false更改为true时仍允许渲染）：

这就成功了。简单整洁。谢谢你，杰夫！太棒了，很高兴能帮忙！但是当我需要按请求显示snakbar成功或失败时，我会做什么！！