ReactNative+Redux+NativeBaseでつくるサンプル実装をのぞく

"jest": {
  "preset": "react-native",
  "transformIgnorePatterns": [
    "/node_modules/(?!native-base|react-native-router-flux)/"
  ]
}

1. 下記のような画面のルーティングをApp.jsなどに定義する

<Router>
  <Scene key="root">
    <Scene key="main">
      <Scene key="ComponetA" component={ComponetA} initial={true} />
      <Scene key="ComponetB" component={ComponetB} />
    </Scene>
  </Scene>
</Router>
※ 一番最初に表示されるのはComponetAとなる。

2. 遷移元からComponentBへ進む

・遷移先のComponentへ送る値がある場合 → Actions.ComponetB({ id: item.id, title: item.title, content: item.content });
・遷移先のComponentへ送る値がない場合 → Actions.ComponetB();
※ 送った値は該当のComponentBのthis.propsに格納された状態になる

3. ComponentBから遷移元へ戻る

Actions.pop();

import React, { Component } from 'react';

// React-Reduxのインポート宣言 → ProviderタグでラップすることでReactコンポーネント内でStoreにアクセスできるようにする
import { Provider } from 'react-redux';

// createStore, applyMiddlewareのインポート宣言
import { createStore, applyMiddleware } from 'redux';

// redux-thunkのインポート宣言
import ReduxThunk from 'redux-thunk';

// redux-loggerのインポート宣言
import logger from 'redux-logger';

// react-native-router-fluxのインポート宣言(Router, Sceneを使用)
import { Router, Scene } from 'react-native-router-flux';

// firebaseのインポート宣言を行う
import firebase from 'firebase';

// reducerのインポート宣言
import reducers from './redux/reducers';

// configのインポート宣言 ※config/index.jsを作成し下記を定義(Firebaseから持ってくる値)
import { 
  API_KEY,
  AUTH_DOMAIN,
  DATABASE_URL,
  STORAGE_BUCKET,
  MESSAGING_SENDER_ID 
} from './config';

// 各画面表示用のそれぞれのコンポーネント
import TutorialContents from './components/contents/TutorialContents';
import AuthContents from './components/contents/AuthContents';
import GlobalTabContents from './components/contents/GlobalTabContents';
import RecordRequestContents from './components/contents/RecordRequestContents';
import SettingContents from './components/contents/SettingContents';
import WebViewContents from './components/contents/WebViewContents';

export default class App extends React.Component {

  // - Component Life Cycles

  // コンポーネントの内容がMountされる前に行う処理
  componentWillMount() {

    // firebaseのセッティング情報を記載する
    // ※API情報に関してFirebaseコンソールを取得 → Authentication → 「ログイン方法」でメール/パスワードを有効にする
    const config = {
      apiKey: API_KEY,
      authDomain: AUTH_DOMAIN,
      databaseURL: DATABASE_URL,
      storageBucket: STORAGE_BUCKET,
      messagingSenderId: MESSAGING_SENDER_ID
    };

    // firebaseを有効にする
    firebase.initializeApp(config);
  }

  // - Rendering Components

  render() {

    // Redux本来のdispatch処理が実行される前にMiddlewareの処理を実行する
    const store = createStore(reducers, {}, applyMiddleware(ReduxThunk, logger));
    return (
      <Provider store={store}>
        <Router>
          <Scene key="root">
            <Scene key="auth">
              <Scene key="TutorialContents" initial={true} component={TutorialContents} hideNavBar={true} />
              <Scene key="AuthContents" component={AuthContents} hideNavBar={true} />
            </Scene>
            <Scene key="main">
              <Scene key="GlobalTabContents" initial={true} component={GlobalTabContents} hideNavBar={true} />
              <Scene key="RecordRequestContents" component={RecordRequestContents} hideNavBar={true} />
              <Scene key="SettingContents" component={SettingContents} hideNavBar={true} />
              <Scene key="WebViewContents" component={WebViewContents} hideNavBar={true} />
            </Scene>
          </Scene>
        </Router>
      </Provider>
    );
  }
}

import React, { Component } from 'react';

import {
  StyleSheet
} from 'react-native';

import {
  Drawer,
  Container
} from 'native-base';

// react-native-router-fluxのインポート宣言(Actionを使用)
import { Actions } from 'react-native-router-flux';

// グローバルコンテンツ用の共通コンポーネント
import GlobalHeader from '../common/GlobalHeader';
import GlobalFooter from '../common/GlobalFooter';
import GlobalTab from '../common/GlobalTab';

// サイドメニュー用のコンポーネント
import GlobalSideMenu from './GlobalSideMenu';

// スクリーン表示用のコンポーネント
import CommonScreenContainer from '../common/CommonScreenContainer';
import FeedScreen from './screen/feed/FeedScreen';
import RecordListScreen from './screen/recordList/RecordListScreen';
import NewsScreen from './screen/news/NewsScreen';
import QuestionScreen from './screen/question/QuestionScreen';

// タブ表示用の要素
let screenItems = [

  // タブと連動した部分
  { screen: "feed", title: "フィード", icon: "list" },
  { screen: "diary", title: "勉強日記", icon: "clipboard" },

  // ドロワーと連動した部分
  { screen: "information", title: "新着のお知らせ" },
  { screen: "question", title: "よくある質問" },

  // グローバルメニューと連動した部分
  { screen: "setting", title: "設定" }
];

// タブまでのインデックス番号
let TAB_CONTENT_INDEX_LIMIT = 1;

export default class GlobalTabContents extends React.Component {

  // - Component Life Cycles

  // コンストラクタ
  constructor(props) {
    super(props);

    // ステートの初期化を行う（ドロワーに関する設定と現在選択されている画面に関する設定）
    this.state = { isDrawerOpen: false, isDrawerDisabled: false, selectedIndex: 0 };
  };

  // MARK: - Functions

  // タイトルを表示する
  _showTitle = (index) => {
    return screenItems[index].title;
  };

  // コンテンツを表示する
  _showContents = (index) => {
    switch (index) {
      case 1:
        return (<RecordListScreen />);
      case 2:
        return (<NewsScreen />);
      case 3:
        return (<QuestionScreen />);
      default:
        return (<FeedScreen />);
    }
  };

  // タブのボタンを表示する
  _showGlobalTabs = () => {
    return screenItems.map( (tabBarItem, index) => {
      if (index <= TAB_CONTENT_INDEX_LIMIT) {
        return (
          <GlobalTab 
            key={index}
            selected={this.state.selectedIndex === index}
            title={tabBarItem.title}
            icon={tabBarItem.icon}
            onPress={ () => this._onPressGlobalTab(index) } />
        );
      }
    });
  };

  // タブのボタンを押下した際の処理
  _onPressGlobalTab = (index) => {
    this.setState({ selectedIndex: index });
  };

  // ヘッダーのメニューボタンを押下した際の処理
  _onPressMenuButton = () => {
    this._drawer._root.open();
  };

  // ヘッダーの設定ボタンを押下した際の処理
  _onPressSettingButton = () => {
    Actions.SettingContents();
  };

  // ドロワーメニュー経由でコンテンツを更新する際の処理
  _updateContentsFromDrawer = (index) => {
    this.setState({ selectedIndex: index });
    this._drawer._root.close();
  };

  // ドロワーの開閉状態を変更する際の処理
  _updateDrawerOpenState = (result) => {
    this.setState({ isDrawerOpen: result });
  };

  // - Rendering Components

  render() {
    const { selectedIndex, isDrawerDisabled } = this.state;
    /**
     * Memo:
     * NativeBaseのDrawerは下記のライブラリを拡張して作られている
     * (各種プロパティの参考) React Native Drawer
     * https://github.com/root-two/react-native-drawer#props
     */
    return (
      <Drawer
        ref={ (ref) => { this._drawer = ref; } }
        type={"overlay"}
        content={ 
          /* GlobalSideMenuコンポーネントで_updateContentsFromDrawerを実行できるようにする */
          <GlobalSideMenu updateContentsFromDrawer={this._updateContentsFromDrawer} />
        }
        onOpen={ () => this._updateDrawerOpenState(true) }
        onClose={ () => this._updateDrawerOpenState(false) }

        ・・・（以下のDrawerの設定に関しては省略）・・・

        >
        {/* 画面に表示している内容 */}
        <Container style={styles.container}>
          <GlobalHeader 
            title={this._showTitle(selectedIndex)}
            onPressMenuButton={ () => this._onPressMenuButton() }
            onPressSettingButton={ () => this._onPressSettingButton() } />
          <CommonScreenContainer screen={this._showContents(selectedIndex)} />
          <GlobalFooter tabs={this._showGlobalTabs()} />
        </Container>
      </Drawer>
    );
  };
}

// - Component Styles

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#eeeeee'
  }
});

・・・（省略）・・・

// グローバルコンテンツ用の共通コンポーネント
import GlobalHeader from '../common/GlobalHeader';

・・・（省略）・・・

// タブ表示用の要素
let screenItems = [

  // タブと連動した部分
  { screen: "feed", title: "フィード", icon: "list" },
  { screen: "diary", title: "勉強日記", icon: "clipboard" },

  ・・・（他にもフッターに並べたいものがあれば同様に追加していく）・・・
];

export default class GlobalTabContents extends React.Component {

  // - Component Life Cycles

  // コンストラクタ
  constructor(props) {
    super(props);

    // ステートの初期化を行う（ドロワーに関する設定と現在選択されている画面に関する設定）
    this.state = { isDrawerOpen: false, isDrawerDisabled: false, selectedIndex: 0 };
  };

  // - Functions

  // タイトルを表示する
  _showTitle = (index) => {
    return screenItems[index].title;
  };

  ・・・（省略）・・・

  // ヘッダーのメニューボタンを押下した際の処理
  _onPressMenuButton = () => {
    // TODO: メニューボタン押下時の処理を記載する
  };

  // ヘッダーの設定ボタンを押下した際の処理
  _onPressSettingButton = () => {
    // TODO: 設定ボタン押下時の処理を記載する
  };

  ・・・（省略）・・・

  // - Rendering Components

  render() {
    const { selectedIndex, isDrawerDisabled } = this.state;
    return (
      {/* タイトル表示や押下時に実行したい関数を渡す */}
      <GlobalHeader title={this._showTitle(selectedIndex)}
        onPressMenuButton={ () => this._onPressMenuButton() }
        onPressSettingButton={ () => this._onPressSettingButton() } />
    );
  };
}

import React, { Component } from 'react';

import {
  StyleSheet
} from 'react-native';

import {
  Header,
  Left,
  Right,
  Body,
  Title,
  Button,
  Icon
} from 'native-base';

export default class GlobalHeader extends React.Component {

  // - Rendering Components

  render() {
    const { title, onPressMenuButton, onPressSettingButton } = this.props;
    return (
      <Header iosBarStyle="light-content" style={styles.headerBackgroundColor} hasTabs>
        <Left>
          <Button transparent onPress={onPressMenuButton}>
            <Icon style={styles.buttonColor} name="menu" />
          </Button>
        </Left>
        <Body>
          <Title style={styles.titleColor}>{title}</Title>
        </Body>
        <Right>
          <Button transparent onPress={onPressSettingButton}>
            <Icon style={styles.buttonColor} name="settings" />
          </Button>
        </Right>
      </Header>
    );
  };
}

// - Component Styles

const styles = StyleSheet.create({
  headerBackgroundColor: {
    backgroundColor: '#4169e1'
  },
  titleColor: {
    color: '#ffffff'
  },
  buttonColor: {
    color: '#ffffff'
  }
});

・・・（省略）・・・

import GlobalFooter from '../common/GlobalFooter';
import GlobalTab from '../common/GlobalTab';

・・・（省略）・・・

// タブ表示用の要素
let screenItems = [

  // タブと連動した部分
  { screen: "feed", title: "フィード", icon: "list" },
  { screen: "diary", title: "勉強日記", icon: "clipboard" },

  ・・・（他にもフッターに並べたいものがあれば同様に追加していく）・・・
];

export default class GlobalTabContents extends React.Component {

  // - Component Life Cycles

  // コンストラクタ
  constructor(props) {
    super(props);

    // ステートの初期化を行う（ドロワーに関する設定と現在選択されている画面に関する設定）
    this.state = { isDrawerOpen: false, isDrawerDisabled: false, selectedIndex: 0 };
  };

  // - Functions

  ・・・（省略）・・・

  // タブのボタンを表示する
  _showGlobalTabs = () => {
    return screenItems.map( (tabBarItem, index) => {
      return (
        <GlobalTab 
          key={index}
          selected={this.state.selectedIndex === index}
          title={tabBarItem.title}
          icon={tabBarItem.icon}
          onPress={ () => this._onPressGlobalTab(index) } />
      );
    });
  };

  // タブのボタンを押下した際の処理
  _onPressGlobalTab = (index) => {
    this.setState({ selectedIndex: index });
  };

  ・・・（省略）・・・

  // - Rendering Components

  render() {
    const { selectedIndex, isDrawerDisabled } = this.state;
    return (
      {/* 必要なボタン要素を配置する関数を渡す */}
      <GlobalFooter tabs={this._showGlobalTabs()} />
    );
  };
}

import React, { Component } from 'react';

import {
  Platform,
  StyleSheet
} from 'react-native';

import { 
  Button,
  Icon,
  Text
} from 'native-base';

export default class GlobalTab extends React.Component {

  // - Rendering Components

  render() {
    const { selected, icon, title } = this.props;
    let deviceStyle = (Platform.OS === "ios") ? iosStyles : androidStyles;
    return (
      <Button vertical onPress={this.props.onPress}>
        <Icon style={selected ? deviceStyle.tabSelectedColor : deviceStyle.tabDefaultColor} name={icon} />
        <Text style={selected ? deviceStyle.tabSelectedColor : deviceStyle.tabDefaultColor}>{title}</Text>
      </Button>
    );
  };
}

// - Component Styles

const iosStyles = StyleSheet.create({
  tabDefaultColor: {
    color: '#999999',
  },
  tabSelectedColor: {
    color: '#4169e1'
  }
});

const androidStyles = StyleSheet.create({
  tabDefaultColor: {
    color: '#c6c6c6',
  },
  tabSelectedColor: {
    color: '#ffffff'
  }
});

import React, { Component } from 'react';

import { 
  Footer,
  FooterTab
} from 'native-base';

export default class GlobalFooter extends React.Component {

  // - Rendering Components

  render() {
    const { tabs } = this.props;
    return (
      <Footer>
        <FooterTab>
          {tabs}
        </FooterTab>
      </Footer>
    );
  };
}

import React, { Component } from 'react';

import {
  StyleSheet
} from 'react-native';

import {
  Content,
  List
} from 'native-base';

// 設定コンテンツ用の共通コンポーネント
import SettingListItem from './SettingListItem';

export default class SettingList extends React.Component {

  // - Rendering Components

  render() {
    const { settingItems } = this.props;
    return (
      <Content style={styles.container}>
        {/*
          // 設定コンテンツのリストの形式はこんな感じになっている
          let settingItems = {
            "items": [
              { title: "Twitter", onPressListItem: () => _goTwitterPage() },
              { title: "Facebook", onPressListItem: () => _goFacebookPage() },
              { title: "Github", onPressListItem: () => _goGithubPage() },
              { title: "Slideshare", onPressListItem: () => _goSlidesharePage() },
              { title: "Qiita", onPressListItem: () => _goQiitaPage()) },
            ]
          };
        */}
        <List dataArray={settingItems.items} renderRow={ (item) =>
          <SettingListItem title={item.title} onPressListItem={item.onPressListItem} />
        } />
      </Content>
    );
  };
}

// - Component Styles

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff'
  }
});

import React, { Component } from 'react';

import {
  StyleSheet
} from 'react-native';

import {
  Text,
  Icon,
  ListItem
} from 'native-base';

export default class SettingListItem extends React.Component {

  // - Functions

  // それぞれのソーシャルリンクに合わせた色を設定する
  _getSocialMediaColorCode = (title) => {
    switch (title) {
      case "Twitter":
        return colorStyles.twitterColor;
      case "Facebook":
        return colorStyles.facebookColor;
      case "Github":
        return colorStyles.githubColor;
      case "Slideshare":
        return colorStyles.slideshareColor;
      case "Qiita":
        return colorStyles.qiitaColor;
      default:
        return colorStyles.defaultColor;
    }
  };

  // - Rendering Components

  render() {
    const { title, onPressListItem } = this.props;
    return (
      <ListItem style={styles.listItem} onPress={onPressListItem}>
        <Icon style={[styles.listItemIcon, this._getSocialMediaColorCode(title)]} name="paper-plane" />
        <Text style={styles.listItemText}>{title}</Text>
      </ListItem>
    );
  };
}

// MARK: - Component Styles

const styles = StyleSheet.create({
  listItem: {
    height: 50
  },
  listItemIcon: {
    fontSize: 16,
  },
  listItemText: {
    fontSize: 13,
    paddingLeft: 8,
    fontWeight: 'normal',
    color: '#555555'
  }
});

const colorStyles = StyleSheet.create({
  twitterColor: {
    color: '#00aced',
  },
  facebookColor: {
    color: '#3b5998',
  },
  githubColor: {
    color: '#333333',
  },
  slideshareColor: {
    color: '#0077b5',
  },
  qiitaColor: {
    color: '#55c500',
  },
  defaultColor: {
    color: '#888888',
  }
});

import React, { Component } from 'react';

import { 
  Form
} from 'native-base';

・・・（省略）・・・

// 認証コンテンツ用の共通コンポーネント
import AuthFormInputMail from './AuthFormInputMail';
import AuthFormInputPassword from './AuthFormInputPassword';
import AuthFormErrorMessage from './AuthFormErrorMessage';

・・・（フォーム用の部品に関するComponentを予め切り出しておきインポートする）・・・

class AuthForm extends React.Component {

  // - Functions

  // メールアドレスの入力値変更時の処理
  _onMailChange = (text) => {
    // TODO: 入力したメールアドレスを一時的に保存するstateの変更を行う
  };

  ・・・（フォーム用の部品の動きと連動して実行する処理があれば記載する）・・・

  // - Rendering Components

  render() {
    return (
      <Form>
        <AuthFormInputMail value={this.props.mail} onChangeText={ (mail) => this._onMailChange(mail) } />
        {/*
          // TODO: このComponentのStateの変化に応じてボタンの状態やエラーメッセージの状態を反映する
        */}
      </Form>
    );
  };
}

import React, { Component } from 'react';

import {
  StyleSheet
} from 'react-native';

import { 
  Item,
  Input,
  Label
} from 'native-base';

export default class AuthFormInputMail extends React.Component {

  // - Rendering Components

  render() {
    const { value, onChangeText } = this.props;
    return (
      <Item stackedLabel>
        <Label style={styles.title}>メールアドレス:</Label>
        <Input
          style={styles.input}
          value={value}
          placeholder="例）username@example.com"
          onChangeText={onChangeText}
        />
      </Item>
    );
  };
}

// - Component Styles

const styles = StyleSheet.create({
  title: {
    fontSize: 13,
    fontWeight: "bold",
    color: "#333333"
  },
  input: {
    fontSize: 13,
    color: "#666666"
  }
});

・・・（その他の発行したいアクションについても同様に定義をしています）・・・

// 新着お知らせの取得＆表示処理に関するActionの定義
export const NEWS_FETCH         = 'news_fetch';
export const NEWS_FETCH_SUCCESS = 'news_fetch_success';
export const NEWS_FETCH_FAILURE = 'news_fetch_failure';

// firebaseライブラリのインポート宣言
import firebase from 'firebase';

// 最新のお知らせ情報取得関連のアクションタイプ定義のインポート宣言
import { 
    NEWS_FETCH,
    NEWS_FETCH_SUCCESS,
    NEWS_FETCH_FAILURE
} from './types';

// MARK: - Functions

// 新着のお知らせ情報取得開始時に実行されるメソッド
export const getAllNews = () => {
  return (dispatch) => {

    // 新着のお知らせ取得処理開始時のアクションを実行する
    dispatch({ type: NEWS_FETCH });

    // Firebaseの該当するDBの位置に存在するデータの一覧をJSON形式で取得する
    firebase.database().ref(`/database/news`)
      .once('value', snapshot => {
        fetchNewsSuccess(dispatch, snapshot.toJSON())
      })
      .catch(() => fetchNewsFailure(dispatch));
  };
};

// MARK: - Internal Functions

// 新着のお知らせ情報成功時に実行されるメソッド
const fetchNewsSuccess = (dispatch, values) => {

  // 新着のお知らせ情報取得成功時のアクションを実行する
  dispatch({ type: NEWS_FETCH_SUCCESS, payload: values });
};

// 新着のお知らせ情報失敗時に実行されるメソッド
const fetchNewsFailure = (dispatch) => {

  // 新着のお知らせ情報取得失敗時のアクションを実行する
  dispatch({ type: NEWS_FETCH_FAILURE });
};

// 最新のお知らせ情報のAction定義のインポート宣言
import {
  NEWS_FETCH,
  NEWS_FETCH_SUCCESS,
  NEWS_FETCH_FAILURE 
} from '../actions/types';

// 初期状態のステート定義（オブジェクトの形にする）
const initialState = { newsList: null, error: '', loading: false };

// MARK: - Functions

// 選択されたケースを元にstateの更新を行うメソッド
export default (state = initialState, action) => {
  switch (action.type) {
    case NEWS_FETCH:
      return { ...state, ...initialState, loading: true };
    case NEWS_FETCH_SUCCESS:
      return { ...state, ...initialState, newsList: action.payload };
    case NEWS_FETCH_FAILURE:
      return { ...state, error: '新着お知らせの取得に失敗しました。', loading: false };
    default:
      return state;
  }
};

// combineReducersの処理を行うためのインポート宣言
import { combineReducers } from 'redux';

//各々の要素に関するReducerのインポート宣言
// → AuthReducer: 認証処理に関するState処理に関するReducer
// → NewsReducer: 最新のお知らせの取得処理に関するState処理に関するReducer
// → FeedReducer: フィード情報の取得処理に関するState処理に関するReducer
// → RecordReducer: 記録データ情報の取得処理に関するState処理に関するReducer
// → RecordFormReducer: 記録データのフォーム処理に関するState処理に関するReducer
import AuthReducer from './AuthReducer';
import NewsReducer from './NewsReducer';
import FeedReducer from './FeedReducer';
import RecordReducer from './RecordReducer';
import RecordFormReducer from './RecordFormReducer';

// それぞれのReducerを集約して一つのStateとして管理する
export default combineReducers({
  auth: AuthReducer,
  feed: FeedReducer,
  news: NewsReducer,
  records: RecordReducer,
  recordForm: RecordFormReducer
});

import React, { Component } from 'react';

import {
  StyleSheet
} from 'react-native';

import {
  Content,
  List
} from 'native-base';

// connectのインポート宣言を行う
import { connect } from 'react-redux';

// ActionCreator(Actionの寄せ集め)のインポート宣言(this.props.この中に定義したメソッド名の形で実行)
import {
  getAllNews
} from '../../../../../redux/actions';

// 新着のお知らせコンテンツ用の共通コンポーネント
import NewsListItem from './NewsListItem';
import NewsListLoading from './NewsListLoading';
import NewsListError from './NewsListError';

class NewsList extends React.Component {

  // - Component Life Cycles

  // コンポーネントの内容がMountされる前に行う処理
  componentWillMount() {
    this.props.getAllNews();
  }

  // - Functions

  // 再度取得する処理
  _onPressRetryButton = () => {
    this.props.getAllNews();
  };

  // MARK: - Rendering Components

  render() {
    const { newsList, error, loading } = this.props;

    // 最新のお知らせが取得中の場合における表示
    if (loading) {
      return (
        <NewsListLoading />
      );
    }

    // 最新のお知らせが取得失敗の場合における表示
    if (error !== '') {
      return (
        <NewsListError 
          error={error}
          onPressRetryButton={ () => this._onPressRetryButton() } />
      );
    }

    // 最新のお知らせ情報を配列に格納し直す
    var newsItems = [];
    for (let index in newsList) {
      newsItems.push(newsList[index]);
    }

    // 最新のお知らせが取得成功の場合における表示
    return (
      <Content style={styles.container}>
        <List dataArray={newsItems} renderRow={ (item) =>
          <NewsListItem item={item} />
        } />
      </Content>
    );
  };
}

// - Component Styles

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff'
  }
});

// newのStateから値を取得してthis.propsにセットする ※取得したいStateについては上記のReducerを参照
const mapStateToProps = ({ news }) => {

  // 引数で受け取った認証データを変数に分解する
  const { newsList, error, loading } = news;

  // 分解したそれぞれの値をオブジェクトにして返却する
  return { newsList, error, loading };
};

// インポート可能にする宣言
export default connect(mapStateToProps, { getAllNews })(NewsList);