DrawerNavigatorの中からReudxのActionを呼び出す

いくつかの方法があるようですが、Drawerメニュー自体を１つのComponent（Container）とした方が簡単なので、そうしてみます。

画面としてHome.jsとDrawerメニュー表示表のDrawer.jsを用意すること想定です。
App.jsと同じ階層にscreensディレクトリを作成し、その下にHome.jsとDrawer.jsを作成します。

準備

expo init drawer
cd drawer
npm install --save redux react-redux

App.js

実装します。ポイントは、contentComponentとしてDrawer.jsを指定しているところです。

App.js

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import {
  createStackNavigator,
  createBottomTabNavigator,
  createDrawerNavigator,
  createSwitchNavigator,
  DrawerItems,
  createAppContainer
} from 'react-navigation';

import { Provider } from 'react-redux';
import createStore from './createStore';

import Home from './screens/Home';
import Drawer from './screens/Drawer';

const RootDrawer = createAppContainer(createDrawerNavigator(
  {
    Home: { screen: Home }
  },
  {
    contentComponent: Drawer
  }
));


const store = createStore();


export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <RootDrawer />
      </Provider>
    );
  }
}

screens/Home.js

別にContainerにする必要はないのですが、動作確認のため書いています。

Home.js

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

import { connect } from 'react-redux';
import { updateUserName } from '../actions/userAction';

class Home extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Home</Text>
                <Text>{this.props.state.userData.user.name}</Text>
                <Button
                    title='updateName'
                    onPress={() => this.props.updateUserName('FOO')}
                />
            </View>
        );
    }
}

const mapStateToProps = state => (
    {
        state: state,
    }
);

const mapDispatchToProps = dispatch => (
    {
        updateUserName: (name) => dispatch(updateUserName(name)),
    }
);

export default connect(mapStateToProps, mapDispatchToProps)(Home);
// export default Home;

screens/Drawer.js

Drawerメニュー用のComponentもほぼ普通通りにかけるようです。これは簡単。便利。

Drawer.js

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

import { connect } from 'react-redux';
import { updateUserName } from '../actions/userAction';

class Drawer extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Drawer</Text>
                <Text>{this.props.state.userData.user.name}</Text>
                <Button
                    title='updateName'
                    onPress={() => this.props.updateUserName('FOO')}
                />
            </View>
        );
    }
}

const mapStateToProps = state => (
    {
        state: state,
    }
);

const mapDispatchToProps = dispatch => (
    {
        updateUserName: (name) => dispatch(updateUserName(name)),
    }
);

export default connect(mapStateToProps, mapDispatchToProps)(Drawer);
// export default Drawer;

最初やり方がわからず苦労しましたが、わかれば簡単でした。