调用API后的React-Redux导航 [英] React-redux navigation after calling API

问题描述

以下是我的减速器代码.

Below is my reducer code.

import * as Helper from '../utils/helper';
import AppNavigator from "../Navigation/navigationStack";

const initialState = { user: "" };

export function pedagogyReducer(state = initialState, action){
  switch (action.type) {
    case 'REGISTER':{
      state = {
        ...state,
        user: action.newUser,
        showError: action.showError ? action.showError : false,
        errorMessage: action.errorMessage ? action.errorMessage: "",
      }
      console.log(action.showError);
      {
        ////////here I want to redirect to login if response if success else want to show error message
      }
      if(!action.showError){
        AppNavigator.router.getStateForAction(
          AppNavigator.router.getActionForPathAndParams("Login")
        );
        return state;
      } else {
        return state;
      }
      break;
    }
    default:
    return state;
  }
}

export default pedagogyReducer;

我不确定是否应该从reducer或其他文件重定向到成功/错误屏幕.我已经使用了reducer，action，中间件(获取API)和react-navigation.

I am not sure should I redirect to success/error screen from reducer or from other file. I have used reducer, action, middleware(fetch APIs) and react-navigation.

推荐答案

Reducer应该是纯函数，因此，这不是放置重定向逻辑的最佳位置.

Reducers should be pure functions, so this isn't the best place for you to put your redirect logic.

redux是一个很好的库，它可以帮助处理基于Redux动作的副作用. -saga ，您应该看看他们的文档.

A great library that helps dealing with side-effects based on Redux actions is redux-saga, you should take a look at their docs.

报价其网站:

redux-saga 是一个旨在使应用程序副作用(例如，诸如数据获取之类的异步事物和诸如访问浏览器缓存之类的不纯之物)易于管理，执行效率更高，易于实现的库.测试，并更好地处理故障.

redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, simple to test, and better at handling failures.

这篇关于调用API后的React-Redux导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！