显示Snackbar与React Redux

首先，我完全不熟悉React和Redux。显示Snackbar与React Redux

无论何时我发送一个事件，我都会在显示Snackbar从material-ui作为通知面板时遇到麻烦。

请参阅我的示例的模型代码。通知未完全显示，因为当API调用成功时，this.props.sending在App组件设置为false。

现在，如果我跳过SOMETHING_FULFILLED调度一切似乎工作正常。在Notification组件的state.open设置为false感谢我onRequestClose功能，但因为在我App组件this.props.sending仍设置为true - 然后每次App组件重新呈现它显示的通知。

任何想法，我会如何正确实施这个？

我有一个action，看起来像这样。

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

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

而我的reducer看起来像这样。

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

我的App组件连接到商店。

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)

而且我Notification组件。

import React, { Component } from 'react' 
import Snackbar from 'material-ui/Snackbar' 

class Notification extends Component { 
    constructor(props) { 
    super(props) 
    this.state = { open: false } 
    } 

    componentWillReceiveProps(nextProps) { 
    if (nextProps.sending) { 
     this.setState({ open: true }) 
    } else { 
     this.setState({ open: false }) 
    } 
    } 

    closeNotification =() => { 
    this.setState({ open: false }) 
    } 

    render() { 
    return (
     <Snackbar 
     open={this.state.open} 
     message={'test'} 
     autoHideDuration={4000} 
     onRequestClose={this.closeNotification} 
     /> 
    ) 
    } 
} 

export default Notification

来源

2016-12-29 wannabefounder

如果我正确地阅读了你的话，听起来好像你的Snackbar正常工作，但它关闭得太快。您希望它显示，但是在4秒后自动关闭，即使API调用本身仅花费了0.5秒。那是对的吗？如果是这样，我相信你可以直接跳过重新渲染您的组件时，state.open正在从true更改为假（但仍允许渲染从假去真时）：

shouldComponentUpdate(nextProps, nextState) { 
    // Only re-render when snackbar is going from closed to open 
    return !this.state.open && nextState.open; 
}

来源

2016-12-29 20:27:58

这做到了。简单而整洁。谢谢，杰夫！ – wannabefounder

真棒，很高兴帮助！ –

但是当我需要根据请求成功或失败时显示snakbar时，我会做什么！ –

显示Snackbar与React Redux

回答

相关问题