스탁 바를 리액턴스 Redux로 표시

Question

우선, 나는 React와 Redux를 완전히 들었다.

이벤트를 전달할 때마다 Snackbar을 material-ui에서 알림 패널로 표시하는 데 문제가 있습니다.

제 예제에는 모형 코드를 참조하십시오. 이 경우에는 this.props.sending의 App 구성 요소가 API 호출이 성공한 즉시 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로 변경 (그러나 false에서 true로 갈 때 여전히 렌더링 수) 될 때 믿는다

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