1

我想要完成的是当用户点击一个按钮时，例如“登录”，我触发我的操作，将我的应用状态减速器中loading:true的状态设置为并弹出加载屏幕。我希望通过一个操作将我的显示加载状态设置为 true，从而在我的屏幕上使用该功能。

我不知道在我的减速器中安装导航器是否是错误的，并且即使在设置我的状态后也让它触发导航。我觉得我的减速器应该处理我的状态，而不是别的。它应该在我的操作文件中吗？

在我的应用程序的这一点上，一切正常......所有控制台登录都会在正确的时间触发。我只是不确定应该在哪里以可以在多个屏幕上使用的方式触发show lightbox 事件。

感谢您的关注！

包.json

"dependencies": {
    "axios": "^0.16.2",
    "date-fns": "^1.28.5",
    "lodash": "^4.17.4",
    "native-base": "^2.3.0",
    "react": "16.0.0-alpha.12",
    "react-native": "0.46.4",
    "react-native-navigation": "^1.1.143",
    "react-native-vector-icons": "^4.2.0",
    "react-redux": "^5.0.5",
    "redux": "^3.7.2",
    "redux-persist": "^4.8.2",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "babel-jest": "20.0.3",
    "babel-preset-react-native": "2.1.0",
    "jest": "20.0.4",
    "react-test-renderer": "16.0.0-alpha.12"
  },

动作/appStateActions.js

import {
  APP_LOADING_SCREEN,
  APP_LOADING_BUTTON
} from './actionTypes';


export const showLoadingScreen = () => async dispatch => {
  console.log("this is loading screen action");
  dispatch({ type: APP_LOADING_SCREEN, payload: true });

}

export const showLoadingButton = () => async dispatch => {
  console.log("this is loading button action");
  dispatch({ type: APP_LOADING_BUTTON, payload: true });
}

减速器/appStateReducer

import{
  APP_LOADING_SCREEN,
  APP_LOADING_BUTTON
} from '../actions/actionTypes';

const INITIAL_STATE = {
  isLoadingScreenVisible: false,
  isLoadingButtonVisible: false
};


export default function(state = INITIAL_STATE, action) {
  switch (action.type){
    case APP_LOADING_SCREEN:
      return { ...state, ...INITIAL_STATE, isLoadingScreenVisible: action.payload };
    case APP_LOADING_BUTTON:
      return { ...state, ...INITIAL_STATE, isLoadingButtonVisible: action.payload };
    default:
      return state;
  }
}

我的登录屏幕已完成，尽管没有加载指示器，但我只在下面发布了其中的一部分

 loginSubmit(){
    this.props.showLoadingScreen(); 
  }

<TouchableOpacity activeOpacity={1.5} onPress={() => this.loginSubmit() }>
   <View style={styles.button}
         <Text style={styles.buttonText}>Sign In</Text> 
   </View>
</TouchableOpacity>

const mapStateToProps = ({ auth }) => {
  const { locationDisplay, locationValue, serviceUrl } = auth;
  
  return { locationDisplay, locationValue, serviceUrl };
};

export default connect(mapStateToProps, {loginUser, showLoadingScreen})(LoginScreen);
4

3 回答 3

0

我在 Swift 本机代码中使用 Redux 设置，而不是 react-native。我的状态的一部分是当前屏幕堆栈的数组，我有一个组件来监视该状态的一部分，并根据该数组中的内容显示或关闭屏幕。使屏幕出现或消失只需向/从该数组添加/删除项目，其余的由组件负责。通过查看我所在州的数组，我可以轻松查看当前呈现的屏幕...

于 2017-08-12T22:37:52.327 回答
0

我的理解是，你的 reducer 应该保持纯粹的功能，不会产生任何副作用。所以，简而言之，不——你可能不应该在减速器中处理导航。

于 2018-02-01T18:10:08.000 回答
0

在反应中，我们使用了像 saga 这样的中间件。因为我们在响应成功或失败时调度操作。如果成功并且如果您想导航，您可以根据条件在 saga 内部使用它。假设我想在我的响应到达后导航，然后我可以使用 if 语句和导航屏幕。

于 2021-07-13T17:33:37.810 回答