저는 반응식 초보자이며 매 15 초마다 API에서 검색 될 상태를 기반으로 사용자에게 경고해야합니다. 이를 위해 내 주요 구성 요소에 반응 기본 배경 타이머를 사용하여 서비스를 호출합니다. 하지만 응용 프로그램이 다른 화면 (구성 요소)에있는 경우에도 서비스가 주 구성 요소에서 완벽하게 실행 되더라도 수신 된 결과에 따라 해당 소품이나 상태가 업데이트되지 않습니다. 다른 화면과 주요 구성 요소의 소품은 업데이트되지 않습니다). 앱이 기본 구성 요소에 없으면 경고가 표시되지 않습니다.응답 네이티브 앱 전체에서 글로벌 알림 사용
누구든지 나에게이 방법을 제안 할 수 있습니까?
class Home extends Component{
constructor(props){
super(props)
this._onPopUpShowed = this._onPopUpShowed.bind(this)
}
componentDidMount(){
//Initial call after the launch
this.props.fetchLiveOrderData()
//Start timer for polling
const intervalId = BackgroundTimer.setInterval(() => {
isBackgroudLoad=true
this.props.fetchLiveOrderData()
}, 1000*15);
}
render(){
const{payload,isFetching,isError,isSuccess} = this.props.liveOrderData
return(
//Render UI depending on the data fetched
);
}
}
//map state to props
const mapStateToProps = state => {
return {
liveOrderData: state.liveOrderData
}
}
//map dispatch to props
const mapDispatchToProps = dispatch => {
return {
fetchLiveOrderData :() => dispatch(fetchLiveOrderData())
}
}
export default connect(mapStateToProps, mapDispatchToProps) (Home)
liveOrderReducer.js
import {
FETCHING_LIVE_ORDER_DATA, FETCHING_LIVE_ORDER_DATA_SUCCESS, FETCHING_LIVE_ORDER_DATA_ERROR
} from '../constants'
const initialState = {
payload: [],
msg:[],
isFetching: true,
isError: false,
isSuccess: false
}
export default liveOrderReducer = (state = initialState, action) => {
switch(action.type){
case FETCHING_LIVE_ORDER_DATA :
return {
...state,
payload: [],
msg:[],
isFetching: true,
isError: false,
isSuccess: false
}
case FETCHING_LIVE_ORDER_DATA_SUCCESS :
return {
...state,
payload: action.data,
msg:[],
isFetching: false,
isError: false,
isSuccess:true
}
case FETCHING_LIVE_ORDER_DATA_ERROR :
return {
...state,
payload: [],
msg:action.msg,
isFetching: false,
isError: true,
isSuccess:false
}
default:
return state
}
}
하는 index.js
import {
FETCHING_LIVE_ORDER_DATA, FETCHING_LIVE_ORDER_DATA_SUCCESS, FETCHING_LIVE_ORDER_DATA_ERROR
} from '../constants'
import api from '../lib/api'
export const getLiveOrderData =() => {
return {
type : FETCHING_LIVE_ORDER_DATA
}
}
export const getLiveOrderDataSuccess = data => {
return {
type : FETCHING_LIVE_ORDER_DATA_SUCCESS,
data
}
}
export const getLiveOrderDataFailure =() => {
return {
type : FETCHING_LIVE_ORDER_DATA_ERROR
}
}
export const fetchLiveOrderData =() => {
return(dispatch) => {
dispatch(getLiveOrderData())
api.getOrder().then(resp => {
dispatch(getLiveOrderDataSuccess(resp))
}).catch((err) => {
dispatch(getLiveOrderDataFailure(err))
})
}
}
몇 가지 코드를 추가하거나 도움을 드릴 수 없습니다. [최소한의 완전하고 검증 가능한 예제를 만드는 방법] (https://stackoverflow.com/help/mcve)을 참조하십시오. –
추가 된 코드 스 니펫을 참조하십시오. 위와 같이 fetchLiveOrderData() 메소드는 매 15 초마다 호출됩니다. 어쨌든 응용 프로그램이 다른 화면 (구성 요소)에 있더라도 홈 구성 요소가 홈 구성 요소에서 최신 소품을받을 수 있습니까? (componentWillReceiveProps()의 실행) – Shanaka