Question

我试图从App.js获取数据以获取网络连接可用性。我从App.js获取数据到action和reducer但是reducer没有更新我的组件的状态。 reducer中的控制台日志正在运行，但我无法在myComponent的mapStateToProps中获取数据。我的App.js文件包含此代码。

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { NetInfo } from 'react-native';
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import reducers from './src/reducers';
import Router from './src/Router';
import { internetConnectionChanged } from './src/actions/';

class App extends Component {
 componentWillMount() {
  NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectionChange);
 }

componentWillUnmount() {
 NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectionChange);
}

handleConnectionChange = (isConnected) => {
 NetInfo.isConnected.fetch().done(
(isConnecteds) => {
  const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
  store.dispatch(internetConnectionChanged(isConnecteds));  
});
};
render() {
 const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
  return (
  <Provider store={store}>
      <Router />
  </Provider>
  );
 }
}

export default App;

我的操作文件中的代码是

import { CONNECTION_CHANGE } from '../actions/types';

export const internetConnectionChanged = (isConnected) => {
 return {
   type: CONNECTION_CHANGE,
  payload: isConnected
 };
};

通过actions文件的index.js导出通过export * from './AppActions';

reducer的代码是

import { CONNECTION_CHANGE } from '../actions/types';

const INITIAL_STATE = { isConnected: false };

export default (state = INITIAL_STATE, action) => {
 switch (action.type) {
  case CONNECTION_CHANGE:
  console.log(action.payload);
  return { ...state, isConnected: action.payload };
  default:
  return state;
 }
};

在我的组件下，这是获取信息的代码

const mapStateToProps = ({ auth, app }) => {
const { email, password, error, loading } = auth;
const { isConnected } = app;
return { email, password, error, loading, isConnected };
};

export default connect(mapStateToProps, {
 emailChanged,
 passwordChanged,
 loginUser,
 forgotPasswordAction,
 })(LoginForm);

Answer 1

在App类外创建商店。这可能导致商店始终具有初始减速器值。只需在Class App extends Component行

之前粘贴以下行

 const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));

同样从以下函数

中删除相同的上述代码行

handleConnectionChange = (isConnected) => {
 NetInfo.isConnected.fetch().done(
(isConnecteds) => {
  const store = createStore(reducers, {}, applyMiddleware(ReduxThunk)); //remove this line
  store.dispatch(internetConnectionChanged(isConnecteds));  
});
};

在reducer更新状态后，状态不会更新

1 个答案: