从 react-native-router-flux 事件调度操作到 redux

Posted 2023-02-22

【中文标题】从 react-native-router-flux 事件调度操作到 redux

【英文标题】：Dispatch action to redux from react-native-router-flux event

【发布时间】：2016-12-03 12:14:04

【问题描述】：

我正在使用react-native-router-flux，但我不知道如何从工具栏操作中调度 redux 操作，具体取决于用户从工具栏中选择操作时的状态，例如用户是否已登录它按下工具栏中的用户按钮，它应该导航到他的个人资料，否则它应该导航到登录屏幕。

这是我尝试过的，它有效，但它显着减慢了应用程序（它不再可用），如果你看一下代码，正在做的是初始化一个“全局”函数并将其设置为redux 存储，所以我可以使用它来调度操作。

'use strict'
import  Router, Scene, Actions  from 'react-native-router-flux';
//redux
import  bindActionCreators  from 'redux';
import  connect  from 'react-redux';
import * as actionCreators from '../redux/actions-creators/actions';
function mapStateToProps(state) 
  return 
    //...
  

function mapDispatchToProps(dispatch) 
  return bindActionCreators(actionCreators, dispatch);

const scenes = Actions.create(
  <Scene
    key="root"
    onRight=() => 
               Actions.profile();
             >
    <Scene
      key="home"
      component=Home
      title="Home"
      initial=true />
    <Scene
      key="login"
      component=LoginScreen
      title="Login" />
    <Scene
      key="editProfile"
      component=EditProfile
      title="EditProfile"
      onRight=() => 
                 Actions.home(); // this works
                 _logout(); // this is what i need to do, 
                 // it calls the function below,
                 // dispatch is not available here, this gets compiled 
                 // before the app runs
                 // this.props.logout(); // this is what i need
                />
  </Scene>
);
var logoutAction = () => ; // gets assigned to the redux logout action
function _logout() 
  logoutAction(); // calls the redux logout action

class AppNavigator extends React.Component 
  constructor(props) 
    super(props);
  
  componentDidMount() 
    logoutAction = this.props.logout; // this "hack" breaks performance
    Backandroid.addEventListener('hardwareBackPress', function() 
      Actions.pop();
      return true;
    );
  
  render() 
    return <Router scenes=scenes />
  

const MainNavigator = connect(mapStateToProps, mapDispatchToProps)(AppNavigator);
export default MainNavigator;

我需要找到正确的方法来执行此操作，例如在场景中的 onRight=() => ...here... ); 方法中的调度操作

我尝试的另一件事是将场景定义放在 render() 方法中，但应用程序运行速度要慢得多，这种在外部定义定义的方法使应用程序运行得更快，但它不允许我调用this.props，因为这是未定义的。

【参考方案1】：

未经测试，因此不确定这是否可行，但请试一试。我也使用 RNRF，但我不使用 onRight 道具。我通常使用自定义导航栏并将操作传递给它。

// pass the action as a prop (not sure of your logout action's location)
function mapDispatchToProps(dispatch) 
  return bindActionCreators(
    logout: actions.auth.logout
  , dispatch);

// then for onRight the action can be referenced as
onRight=() =>  this.props.logout() 

【讨论】：

最终重构了整个事情，无法接受您的答案，因为它不起作用，想要稍微修复一下吗？ ty

如何在静态方法中获得this.props？ @Gazta，您能否详细说明您为使其正常工作所做的更改或编写您自己的答案并接受它？

你好@IrisSchaffer，我放弃了这种方法，现在我正在使用抽屉，并将场景移回渲染方法，这将授予您访问道具的权限，我已经声明了它们出于性能原因在组件之外，但现在它工作正常。只需像通常使用 redux 一样连接您的导航器组件，然后用提供程序包装它，它可能会抛出一些“已定义的键”，但您不必担心，如果它有效，请告诉我。

【参考方案2】：

 <Scene
     key="dashBoard"
     component=DashBoard
     type="reset"
     renderTitle=() =>
     <View style=Styles.renderTitleStyle>
       <Image source=Images.logo/>
     </View> 
     onRightButton=() => console.log('print')
     renderRightButton=() =>
       <TouchableOpacity onPress=() => this.logOut()>
         <Icon name="md-power" color="#FFFFFF" style=fontSize: 25, top: 0/>
       </TouchableOpacity>
     
 />

//======>>

logOut()
 console.log('logout');