Question

我正在编写React Native应用并使用Redux。

我已经关注了this教程。

我遇到了以下警告信息：

警告：在现有状态转换期间无法更新（例如在'render'或其他组件的构造函数中）。渲染方法应该是道具和状态的纯函数;构造函数副作用是反模式，但可以移动到'componentWillMount'

这就是我所拥有的：

MyComponent.js

import React from 'react';
import { login } from './actions'
import { connect } from 'react-redux';
import { View, Text } from 'react-native';
import { Button } from 'native-base';

class MyComponent extends React.Component {
  render() {
    return(
      <View>
        <Button onPress={() => this.props.login("username","password")}>
          <Text>
            Login!
          <Text>
        </Button>
      </View>
    )
  }
}

function mapStateToProps(state) {
  return { state: state.login }
}

function mapDispatchToProps(dispatch) {
  return {
    login: (username, password) => dispatch(login(username, password))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen);

App.js

import React, { Component } from 'react';
import MyComponent from './MyComponent';

import { Provider } from 'react-redux';

import configureStore from './configureStore';
import Route from './config/Router';

export default class App extends Component {
  render() {
    let store = configureStore();
    return (
      <Provider store={store}>
        <MyComponent />
      </Provider>
    );
  }
}

configureStore.js

import { createStore } from 'redux';
import reducers from './reducers';
import thunk from 'redux-thunk';

export default function configureStore() {
  let store = createStore(reducers, applyMiddleware(thunk));
  return store;
}

reducers.js

import * from './constants'
import { combineReducers } from 'redux';

const initialState = {
  isLoggedIn: false,
  isLoggingIn: false,
  username: '',
  error: false
};

function loginReducer(state = initialState, action) {
  console.log('Reducer is called.');
  console.log('Action is ' + JSON.stringify(action));
  console.log('state is ' + JSON.stringify(state));
  switch (action.type) {
    case LOGGING_IN:
      return {
        ...state,
        isLoggedIn: false,
        isLoggingIn: true,
        username: '',
        error: false
      }
    case LOG_IN_SUCCESS:
      return {
        ...state,
        isLoggedIn: true,
        isLoggingIn: false,
        username: action.data.username,
        error: false
      }
    case LOG_IN_FAILURE:
      return {
        ...state,
        isLoggedIn: false,
        isLoggingIn: false,
        username: '',
        error: true
      }
   }
}

export default rootReducer = combineReducers({
  loginReducer,
});

actions.js

import * './constants'
import { Actions } from 'react-native-router-flux';

export function login(username, password) {
  return (dispatch) => {
    dispatch(loggingIn())
    //here will be some API ASYNC CALLS! 
    //depending on the result we will dispatch again!
    myService.login(username,password).done((result) => {
      if(result !== null) {
        dispatch(loginSuccess(result))
      } else {
        dispatch(loginFailure())
      }
    })
  }
}

function loggingIn() {
  return {
    type: LOGGING_IN
  }
}

function loginSuccess(data) {
  return {
    type: LOG_IN_SUCCESS,
    data: data
  }
}

function loginFailure() {
  return {
    type: LOG_IN_FAILURE
  }
}

我调试了代码。我看到第一次调度电话后警告就出现了！（dispatch（loggingIn（）））

所以，我不知道问题是什么。

我也想知道这是否真的使用了redux和async api调用。你能帮助我吗？非常感谢。

“在现有状态转换期间无法更新”React Native和Redux与外部API

0 个答案: