react-reduxreact-reduxを使い始める

備考

import { connect } from 'react-redux';

const Customers = { ... };
const mapStateToProps = (state) => { ... }
const mapDispatchToProps = (dispatch) => { ... }

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

バージョン

完全な例

"Customers"ダムコンポーネントをReduxストアに接続するコンテナ "CustomersContainer"があるとします。

index.jsの場合：

import { Component }, React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './redux/rootReducer';
import CustomersContainer from './containers/CustomersContainer';

let store = createStore(rootReducer);

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

CustomersContainerの場合：

import React, { Component } from 'react';
import { connect } from 'react-redux';

// Import action creators
import { fetchCustomers } from '../redux/actions';

// Import dumb component
import Customers from '../components/Customers';

// ES6 class declaration
class CustomersContainer extends Component {
  componentWillMount() {
    // Action fetchCustomers mapped to prop fetchCustomers
    this.props.fetchCustomers();
  }

  render() {
    return <Customers customers={this.props.customers} />;
  }
}

function mapStateToProps(state) {
  return {
    customers: state.customers
  };
}

// Here we use the shorthand notation for mapDispatchToProps
// it can be used when the props and action creators have the same name 
const CustomersContainer = connect(mapStateToProps, { fetchCustomers })(CustomersContainer);

export default CustomersContainer;
 

React Reduxを使用したHello World

このガイドでは、すでにインストールされていることを前提とreact 、 redux 、 react-router とreact-redux と設定しているがreact 、 redux とreact-router 。あなたがいない場合は、これを行うにしてください。

注： react-redux 依存関係ではないreact-router では、ルーティングのための反応アプリケーションでこれを使用する可能性が非常に高いため、react-reduxを使用するのは簡単です。

FILENAME： app.js

'use strict';

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router';
import { Provider } from 'react-redux';
import store from './stores';

render(
  (
    <Provider store={ store }>
      <Router history={ browserHistory }>
        {/* all the routes here */}
      </Router>
    </Provider>
  ),
  document.getElementById('app')
);
 

このファイルはほとんどの人にとって意味をなさないでしょう。私たちがここでやっているのは、 店舗を./stores から./stores 、それをreact-redux 提供する高次コンポーネントProvider を使用してすべてのルートに渡すことです。

これにより、アプリケーション全体でストアを利用できるようになります。

さて、このシナリオを考えてみましょう 。私たちには、 user 減速UserComponent からデータを取得するコンポーネントUserComponent があり、クリックすると、ストア内のデータを更新するボタンがあります。

アプリケーション構造

私たちのrootReducer は、 user レデューサー

const rootReducer = combineReducers({
    user: userReducer,
})
export default rootReducer;
 

私たちのuserReducer はこのように見えます

const default_state = {
  users: [],
  current_user: {
    name: 'John Doe',
    email: 'john.doe@gmail.com',
    gender: 'Male'
  },
  etc: {}
};

function userReducer( state=default_state, action ) {

  if ( action.type === "UPDATE_CURRENT_USER_DATA" ) {
    return Object.assign( {}, state, { current_user: Object.assign( {}, state.current_user, { [action.payload.field]: action.payload.value } ) } );
  }
  else {
    return state;
  }

}

export default userReducer;
 

私たちのactions ファイルは次のようになります

export function updateCurrentUserData( data ) {
  return {
    type: "UPDATE_CURRENT_USER_DATA",
    payload: data
  }
}
 

最後に、私たちのコンポーネントで動作します

FILENAME： UserComponent.js

'use strict';

import React from 'react';
import { connect } from 'react-redux';
import * as Action from './actions';

let UserComponent = (props) => {

  let changeUserDetails = (field, value) => {
    // do nothing
  }

  return(
    <div>
      <h1>Hello { props.current_user.name }</h1>
      <p>Your email address is { props.current_user.email }</p>
      <div style={{ marginTop: 30 }}>
        <button onClick={ () => { changeUserDetails('name', 'Jame Smith') } }>Change Name</button>
        <button onClick={ () => { changeUserDetails('email', 'jane@gmail.com') } }>Change Email Address</button>
      </div>
    </div>
  )

}

export default UserComponent;
 

もちろん、これは機能しません。まだ店に接続していないためです。

あなたが疑問に思っている場合は、これは無期限の機能コンポーネントです。私たちはredux を使用しており、コンポーネントの内部状態は本当に必要ないので、これを使用するのが適切です。

react-redux によって提供されるconnect メソッドは、3つのパラメータ

mapStateToProps 、 mapDispatchToProps 、およびComponent自体です。

connect( mapStateToProps, mapDispatchToProps )(Component)

mapStateToPropsおよびmapDispatchToPropsと共に、コンポーネントUserComponentに接続を追加しましょう

とのも私たちのchangeUserDetails機能 、いわゆるとき、それはします更新してみましょうdispatch action 私たちにreducers ストアが更新されたら、そして私たちの減速がでキックや店舗への変更を行いますアクションの種類に基づいて、およびreact-redux 再度まします新しいデータでコンポーネントをレンダリングします。

複雑に聞こえる？それは本当ではありません。

私たちのUserComponent.js は次のようになります

'use strict';

import React from 'react';
import { connect } from 'react-redux';
import * as Action from './actions';

const mapStateToProps = ( state, ownProps ) => {
  return {
    current_user: state.user.current_user,
  }
}

const mapDispatchToProps = ( dispatch, ownProps ) => {
  return {
    updateCurrentUserData: (payload) => dispatch( Action.updateCurrentUserData(payload) ),
  }
}


let UserComponent = (props) => {

  let changeUserDetails = (field, value) => {
    props.updateCurrentUserData({ field: field, value: value });
  }

  return(
    <div>
      <h1>Hello { props.current_user.name }</h1>
      <p>Your email address is { props.current_user.email }</p>
      <div style={{ marginTop: 30 }}>
        <button onClick={ () => { changeUserDetails('name', 'Jame Smith') } }>Change Name</button>
        <button onClick={ () => { changeUserDetails('email', 'jane@gmail.com') } }>Change Email Address</button>
      </div>
    </div>
  )

}

const ConnectedUserComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(UserComponent)

export default ConnectedUserComponent;
 

ここで行ったことが追加されました

• mapStateToProps：これは、私たちは店とするとき、 そのデータの変更は、私たちのコンポーネントは、新しいデータで再レンダリングされるからデータを取得することができます。

  コンポーネントが要求しているデータがストア内で変更された場合にのみ、コンポーネントは再レンダリングされ、ストア内の他のデータが変更された場合は再レンダリングされません。

• mapDispatchToProps ：これにより、私たちはコンポーネントからすべてのレデューサーにdispatch actions をdispatch actions できます。（任意のコンポーネントが可能です）アクションのtype に基づいて、userReducerは更新されたデータで新しい状態を返します。

• ConnectedUserComponent ：最後に、すべてのパラメータを渡してconnect メソッドを使用してコンポーネントをストアにconnect し、 connect exported れたコンポーネントをexported た。

• また、 changeUserDetails関数を更新して、 method を呼び出し、データを渡しました。そして、 props は、呼び出されたメソッドをすべての縮小システムにディスパッチします。

注意：

• 私たちが減速機から新しい状態を返さなければ、 react-redux ことは私たちのコンポーネントを再描画しません。

インストールまたはセットアップ

react 直接redux を使用react は難しいかもしれません。変更を保存するときに更新するすべてのcomponent について、そのコンポーネントをredux store にサブスクライブする必要があります

Reduxのは、これらすべての世話をすると、それは本当に簡単それから必要なデータを要求できるコンポーネント書くことができます反応し redux store と、これは私たちが本当に効果的なコンポーネントを作成することができた場合にのみ、それらのデータが変更されます。通知されます。

react-redux をインストールreact-redux は、このnpm コマンドを実行するだけです

npm install --save react-redux
 

そして、あなたは完了です。

注： Reactuxは依存しています

• React（バージョン0.14以降）および
• Redux

PDF - Download react-redux for free