SnackbarにReact Reduxを表示する

Question

まず、ReactとReduxを初めて知りました。

私はイベントを発送するたびにSnackbarを通知パネルとしてmaterial-uiから表示することに問題があります。

私の例ではモックアップコードを参照してください。 API呼び出しが成功した場合、this.props.sendingのAppのコンポーネントがfalseに設定されているため、この通知はすべて表示されません。

ここで、SOMETHING_FULFILLEDディスパッチをスキップすると、すべて正常に動作しているようです。 Notificationコンポーネントのstate.openはonRequestCloseの機能のおかげでfalseに設定されますが、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 

Answer 1

私が正しくあなたを読んでいる場合、あなたはあなたのスナックバーが正常に動作しているように聞こえるが、それはあまりにも早く終了します。表示することを望みますが、APIコール自体がわずか0.5秒かかる場合でも、4秒後に自動的に閉じます。あれは正しいですか？もしそうなら、私はstate.openがtrueからfalseに変更し（まだ偽から真に行くときに、レンダリングが可能）されているときにあなたは、単にあなたのコンポーネントを再レンダリングをスキップすることができると信じて：

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