顯示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

回答

相關問題