テックブログ

  1. React
  2. 121 view

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

はじめに

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 [email protected] 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には1で作成した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">ページ1</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

してみましょう!

おつかれさまでした〜

The following two tabs change content below.

riri

半年おきくらいにバックエンドとフロントエンドを行ったり来たり。 25歳。 将棋好き。

Reactの最近記事

  1. React+ReduxアプリケーションにJWT認証を導入する完全ガイド【ソースコードあり】…

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

  3. 【React】create-react-appでエラーが出た時の対処法

  4. React Native入門〜Expoを使ってお手軽開発

  5. Reactのプロジェクトにintercomを導入する

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。