减速器更新状态后状态未更新

阿伦K

我正在尝试从 App.js 获取网络连接可用性数据。我正在从 App.js 获取数据到 action 和 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
 };
};

这是通过操作文件的 index.js 导出的 export * from './AppActions';

减速器的代码是

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);
希瓦姆

在 App 类之外创建商店。这可能会导致 store 始终具有初始 reducer 值。只需在行之前粘贴以下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));  
});
};

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

减速器未在触发操作时更新状态,因此Redux存储/状态未更新

来自分类Dev

减速器不更新反应 redux 中的状态

来自分类Dev

深度状态的减速器

来自分类Dev

更新减速器中的状态如何触发组件的重新渲染?

来自分类Dev

我的减速器已执行,但状态未在反应中更新

来自分类Dev

如何执行两个减速器来更新状态

来自分类Dev

如何返回Redux减速器的状态

来自分类Dev

减速器不传输初始状态

来自分类Dev

Redux减速器状态突变和恢复初始状态

来自分类Dev

组件在减速器中的状态更改后不会重新渲染

来自分类Dev

React Redux-减速器之间的共享状态(减速器层次结构)

来自分类Dev

Redux –减速器,取决于其他状态

来自分类Dev

Redux动作/减速器与直接设置状态

来自分类Dev

Redux减速器-更改深度嵌套的状态

来自分类Dev

redux-减速器状态为空

来自分类Dev

减速器内部切片状态自参考

来自分类Dev

减速器处于深度嵌套状态

来自分类Dev

在history.push()之后减速器状态丢失

来自分类Dev

Redux动作/减速器与直接设置状态

来自分类Dev

Redux 存储无法从减速器获取状态

来自分类Dev

在减速器中设置状态会产生类型错误

来自分类Dev

减速器中的 Redux 状态不是最新的?

来自分类Dev

减速器中(初始)状态的编辑属性

来自分类Dev

在 react-native 中从另一个减速器更新减速器

来自分类Dev

状态更改后子组件未更新

来自分类Dev

减速器未连接

来自分类Dev

减速器中CRUD的“ U”(更新)部分的问题

来自分类Dev

减速器的参数不会在分派时更新

来自分类Dev

Redux 减速器不更新密钥