【５分でできる】ReactにRouterとRudexをサクッと設定する方法

フロントエンド
4357 view

【５分でできる】ReactにRouterとRudexをサクッと設定する方法

最終更新日:2018/09/20

はじめに
使用するパッケージ
ディレクトリ構造
プロジェクト作成
reduxの設定
- reducerの作成
ルーターの導入
- パッケージのインストール
サンプルページの作成
- - WINDII
  - 最新記事 by WINDII (全て見る)

はじめに

Reactはビューを構成するためのライブラリであり、SPAアプリケーション開発に欠かせないルーターをデフォルトで持っていません。また複雑なアプリケーションを構築するためにはReduxの状態管理も必要となるため、初期の段階でサクッと導入する必要があります。
本記事ではReactにReduxとRouterを導入して接続する方法を徹底解説します！

使用するパッケージ

redux
react-redux
react-router-dom
react-router-redux

ディレクトリ構造

必ずこのようにしなければいけないわけではありませんが、reduxを採用したreactアプリケーションの一例だと思ってください。

プロジェクト作成

create-react-app my-project

reduxの設定

必要なパッケージをインストールします。redux-loggerはログ用のパッケージなので必須ではありません。

npm install --save redux react-redux redux-logger

reducerの作成

今回は特に意味のあるreducerは作らないのですがreduxのStoreを作成するためのreducerがいるのでダミー用のreducerを作ります。

src/reducer配下にindex.jsという名前のファイルを作成して以下のようにしてください。

src/reducers/index.js

export const dumb = (state = {}) => state;

次にsrc/index.jsでreduxの設定をします。先ほど作成したreducerを元にStoreを生成し、Providerコンポーネントを使ってStoreを接続します。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { createStore, combineReducers, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';

import * as reducers from './reducers';

import logger from 'redux-logger';

// Storeを作成する
const store = createStore(
  combineReducers(reducers),
  // applyMiddleware関数でredux-loggerを設定
  applyMiddleware(logger)
);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
, document.getElementById('root'));
registerServiceWorker();

ルーターの導入

Reduxの設定が済んだのでルーターを設定します。

パッケージのインストール

npm install --save react-router-dom react-router-redux@next history

src/index.jsを以下のように書き換えます。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { createStore, combineReducers, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';

import * as reducers from './reducers';

// ルーターの設定
import createBrowserHistory from 'history/createBrowserHistory';
import { routerReducer, routerMiddleware, ConnectedRouter } from 'react-router-redux';

import logger from 'redux-logger';

// historyインスタンスを作成する処理追加
const history = createBrowserHistory();

// Storeを作成する
const store = createStore(
  combineReducers({
    ...reducers,
    router: routerReducer
  }),
  // applyMiddleware関数でredux-loggerを設定
  applyMiddleware(
    routerMiddleware(history),
    logger
  )
);

ReactDOM.render(
  <Provider store={store}>
    {/*ConnectedRouterコンポーネントを追加*/}
    <ConnectedRouter history={history}>
      <App/>
    </ConnectedRouter>
  </Provider>
, document.getElementById('root'));
registerServiceWorker();

ポイントは以下です。
1. createBrowserHistory関数でhistoryインスタンスを作成する
2. createStore関数でrouterReducerを指定する（キーはrouter）
3. applyMiddleware関数の引数にrouterMiddleware(history)を追加する
4. Appコンポーネントの上位にConnectedRouterを指定する。ConnectedRouterには１で作成したhistoryインスタンスを渡す

以上で設定自体は終わりです。お疲れ様でした！

これからは設定したReduxとRouterを実際に使ってみる簡単なサンプルを紹介するので実装イメージがわかない人はもう少しお付き合いください。

サンプルページの作成

src/containers配下にPageOne.jsという名前のファイルを作成して以下のようにしてください。

import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import PageOne from '../components/PageOne';

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

const mapDispatchToProps = dispatch => ({
  onClick (path) {
    dispatch(push(path));
  }
});

export default connect(mapStateToProps, mapDispatchToProps)(PageOne);

前までの設定でReduxとRouterが接続されており、dispatch(push(path))といったreduxのactionをdispatchすることによりルート遷移ができるようになっています。

src/components配下にPageOne.jsという名前のファイルを作成して以下のようにしてください。


import React, { Component } from 'react';
import logo from '../logo.svg';
import '../App.css';

export default class PageOne extends Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }
  onClick() {
    this.props.onClick('/two');
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <h1 className="App-intro">
          Page1
          <button onClick={this.onClick}>page2へ</button>
        </h1>
      </div>
    );
  }
}

こちらは単にビューを表示するだけです。ひとつポイントなのはmapDispatchToPropsで渡ってきたonClick関数を使っていることです。

src/containersにPageTwo.jsを作成して以下のようにしましょう。

import React, { Component } from 'react';
import logo from '../logo.svg';
import '../App.css';

class PageTwo extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header" style={{backgroundColor:"red"}}>
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          Page2
        </p>
      </div>
    );
  }
}

export default PageTwo;

最後にApp.jsを編集して以下のようにしましょう。

import React, { Component } from 'react';
import './App.css';
import PageOne from './containers/PageOne';
import PageTwo from './containers/PageTwo';
import { Route, Link } from 'react-router-dom';

class App extends Component {
  render() {
    return (
      <div className="App">
        <ul>
          <li><Link to="/one">ページ１</Link></li>
          <li><Link to="/two">ページ2</Link></li>
        </ul>
        <Route path="/one" component={PageOne}></Route>
        <Route path="/two" component={PageTwo}></Route>
      </div>
    );
  }
}

export default App;

これによりパスの設定ができました。

npm start

してみましょう！

おつかれさまでした〜

この記事を書いた人
最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

WINDIIテック