redux-props未更新内部addEventListener

Question

我正在使用这个包https://github.com/react-native-community/react-native-netinfo.我的问题是，当我的连接发生变化时，它达到了我的功能，但道具总是一样的，从来没有更新过(在我的状态下，我得到了不同的值(。调试我检查它是否不会再次传递到mapStateToProps，所以也许我错过了一些没有太多反应经验的东西。

组件

class AuthLoading extends Component {
handleAppStateChange = () => {
NetInfo.addEventListener(this.handleConnectivityChange);
};
handleConnectivityChange(connectionInfo) {
// I reach here when my connectivity change but my props are the same(init one) when in my state I got different data.
if (this.props.modalState === false) {
this.props.networkActions.setNetworkConnection(connectionInfo);
/* the network has changed */
this.props.householdActions.getSSID();
this.props.householdActions.getBSSID();
this.props.toastActions.showToast(`Connection type: ${connectionInfo.type}`);
}
// Service Unavailable
if (
// this.props.loggedIn &&
(connectionInfo.type === 'none' || connectionInfo.type === 'unknown') &&
this.props.modalState === false
) {
this.props.navigation.navigate('ServiceUnavailable');
}
}
componentDidMount() {
this.handleAppStateChange();
}
componentDidUpdate() {
AppState.addEventListener('change', this.handleAppStateChange);
}
componentWillUnmount() {
AppState.removeEventListener('change', this.handleAppStateChange);
}
}

集装箱

const mapStateToProps = function(state) {
return {
loggedIn: SessionSelector.loggedIn(state.session),
session: state.session,
networkConnection: NetworkChangeSelector.getNetworkConnection(state.networkChange),
profileFetchedSuccessfully: ProfileSelector.profileFetchedSuccessfully(state.profile),
profileStatus: ProfileSelector.profileStatus(state.profile),
modalState: ModalResolutionSelector.modalState(state.modal)
};
};
const AuthLoadingContainer = connect(
mapStateToProps
)(AuthLoading);
export default AuthLoadingContainer;

Answer 1

最后，我按照这种方式还原传奇：事件通道和侦听器对回调做出反应，返回

// redux.js
...
const store = createStore(...);
sagaMiddleware.runSaga(rootSaga, {store});
// root-saga.js
export default function * rootSaga(context) {
yield setContext(context);
yield fork(watchNetInfo);
}
// watch-netinfo.js
import { call, take, getContext, put } from 'redux-saga/effects';
import { eventChannel } from 'redux-saga';
import NetInfo from '@react-native-community/netinfo';
import * as NavigationService from '../navigators/NavigationService';
export function* netInfoListen() {
const store = yield getContext('store');
return eventChannel((emitter) => {
const netInfoListener = NetInfo.addEventListener((connectionInfo) => {
const state = store.getState();
emitter({
connectionInfo,
showUnavailable:
(connectionInfo.type === 'none' || connectionInfo.type === 'unknown') &&
state.modal.modalResolutionIsOpen === false &&
Boolean(state.session.token)
});
});
return () => {
netInfoListener.remove();
};
});
}
export function* watchNetInfo() {
const chan = yield call(netInfoListen);
try {
while (true) {
let response = yield take(chan);
yield put({
type: 'NETWORK_STATUS_CONNECTION_REQUESTED',
connection: response.connectionInfo
});
if (response.showUnavailable) {
NavigationService.navigate('ServiceUnavailable');
}
}
} catch (e) {
console.log('function*watchNetInfo -> e', e);
}
}