React Reduxは、Reduxに対するReactバインディングを提供するライブラリです。
Reduxストアを認識する反応コンポーネントは、「コンテナ」、「スマートコンポーネント」または「高次コンポーネント(HOC)」と呼ばれます。そのようなコンポーネントは、Reduxを使用するために以下を行う必要があります。
これを手作業で行うことは、 store.subscribe
とstore.dispatch(action)
を使用することを意味します。
React Reduxは、ReduxストアとReactコンテナコンポーネントの間のバインドを、 connect
関数をconnect
簡素化します。これは、Redux状態プロパティとアクションクリエータをコンポーネントの小道具にマップします。
connect
は、より高次のコンポーネントを作成する関数です。 Connectは3つの関数( mapStateToProps
、 mapDispatchToProps
、 mergeProps
)を受け入れ、元のコンポーネントをラップしてコンテナコンポーネントを返し、それを「接続された」コンポーネントに変換します。
import { connect } from 'react-redux';
const Customers = { ... };
const mapStateToProps = (state) => { ... }
const mapDispatchToProps = (dispatch) => { ... }
export default connect(mapStateToProps, mapDispatchToProps)(Customers);
完全な例については、例のセクションを参照してください。
すべてのコンテナコンポーネントがReduxストアにアクセスする必要があるため、React Reduxの特別な<Provider>
コンポーネントを使用することをお勧めします(Reactコンテキストを使用して内部的にすべての子コンポーネントにストアを渡します)。
公式ドキュメント: http : //redux.js.org/docs/basics/UsageWithReact.html
GitHubレポ: https : //github.com/reactjs/react-redux
バージョン | 発売日 |
---|---|
5.0.3 | 2017-02-23 |
5.0.2 | 2017-01-11 |
5.0.1 | 2016-12-14 |
5.0.0 | 2016-12-14 |
4.4.6 | 2016-11-14 |
4.4.5 | 2016-04-14 |
4.4.4 | 2016-04-13 |
4.4.3 | 2016-04-12 |
4.4.0 | 2016-02-06 |
4.3.0 | 2016-02-05 |
4.2.0 | 2016-02-01 |
4.1.0 | 2016-01-28 |
4.0.0 | 2015-10-15 |
3.0.0 | 2015-09-24 |
2.0.0 | 2015-09-01 |
1.0.0 | 2015-08-24 |
0.5.0 | 2015-08-07 |
0.1.0 | 2015-07-12 |
"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
、 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は依存しています