Redux研究ノート(2)

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

ReduxとReactを組み合わせるには、余分なツールが必要です。その中で最も重要なツールはreact-reduxです。

Reactコンポーネントは、Reactコンポーネントを接続して(接続可能に)、Reactコンポーネントを実際にReduxストアに接続する2つの重要なオブジェクト(プロバイダと接続)を提供します。

reduxの基本的な使い方

レデューサーを介してストアを作成し、ストアでアクションをディスパッチするたびに、ストア内のデータがそれに応じて変更されます。

const reducer = (state = {count: 0}, action) => {
switch (action.type){
case 'INCREASE': return {count: state.count + 1};
case 'DECREASE': return {count: state.count - 1};
default: return state;
}
}
const actions = {
increase: () => ({type: 'INCREASE'}),
decrease: () => ({type: 'DECREASE'})
}
const store = createStore(reducer);
store.subscribe(() =>
console.log(store.getState())
);
store.dispatch(actions.increase()) // {count: 1}
store.dispatch(actions.increase()) // {count: 2}
store.dispatch(actions.increase()) // {count: 3}

ReactでReduxを直接使用する

最も外側のコンテナコンポーネントのストアを初期化し、その状態のプロパティをpropsレイヤとして渡します。

class App extends Component{
componentWillMount(){
store.subscribe((state)=>this.setState(state))
}
render(){
return <Comp state={this.state}
onIncrease={()=>store.dispatch(actions.increase())}
onDecrease={()=>store.dispatch(actions.decrease())}
/>
}
}

react-reduxが提供するプロバイダと接続メソッドを使用する

まず、一番外側のコンテナで、Providerコンポーネントのすべてをラップし、前に作成したストアをプロバイダの小道具として渡します。

const App = () => {
return (
<Provider store={store}>
<Comp/>
</Provider>
)
};

プロバイダ内の任意のコンポーネント(Compなど)は、状態でデータを使用する必要がある場合は、接続されたコンポーネントでなければなりません。connectメソッドを使用して、 "書き込んだコンポーネント(MyComp)製品。

class MyComp extends Component {
// content...
}
const Comp = connect(...args)(MyComp);

Connect([mapStateToProps]、[mapDispatchToProps]、[mergeProps]、[options])

Connect()は、mapStateToProps、mapDispatchToProps、mergeProps、およびoptionsの4つのパラメータを受け取ります。

mapStateToProps(state、ownProps):stateProps

ストアのデータを小道具としてコンポーネントにバインドします。

const mapStateToProps = (state) => {
return {
count: state.count
}
}

この関数の最初の引数はReduxの状態で、ここからcount属性を抽出しました。 count属性を持つオブジェクトが返されるため、MyCompはcountという名前のpropsフィールドを持ちます

class MyComp extends Component {
render(){
return <div>计数:{this.props.count}次</div>
}
}
const Comp = connect(...args)(MyComp);

状態にあるデータをコンポーネントに渡す必要はなく、状態のデータに基づいてコンポーネントが必要とする(最小)属性を動的に出力できます。

const mapStateToProps = (state) => {
return {
greaterThanFive: state.count > 5
}
}   

mapDispatchToProps(dispatch、ownProps):dispatchProps

アクションをMyCompにバインドします。

const mapDispatchToProps = (dispatch, ownProps) => {
return {
increase: (...args) => dispatch(actions.increase(...args)),
decrease: (...args) => dispatch(actions.decrease(...args))
}
}
class MyComp extends Component {
render(){
const {count, increase, decrease} = this.props;
return (<div>
<div>计数:{this.props.count}次</div>
<button onClick={increase}>增加</button>
<button onClick={decrease}>减少</button>
</div>)
}
}
const Comp = connect(mapStateToProps, mapDispatchToProps)(MyComp);

mapDispatchToPropsメソッドは、増加属性と装飾属性を持つオブジェクトを返すので、これらの2つの属性もMyCompの小道具になります。

actions.increase()を呼び出すと、アクションオブジェクト{type: 'INCREASE'}のみが取得されます。このアクションをトリガーするには、ディスパッチメソッドをストアで呼び出す必要があります。 Diapatchは、mapDispatchToPropsの最初の引数です。

MyCompコンポーネントがディスパッチの存在を認識できないようにするには、関数を直接呼び出し可能にするために関数をラップします(つまり、メソッドを呼び出すとディスパッチがトリガーされます)。

Redux自体はbindActionCreators関数を提供して、アクションを直接呼び出せる関数としてラップします。

import {bindActionCreators} from 'redux';
const mapDispatchToProps = (dispatch, ownProps) => {
return bindActionCreators({
increase: action.increase,
decrease: action.decrease
});
}

接続APIによると、私たちはReact ES6にマッチするためにES7デコレータ関数を使用できることを発見しました:

@connect(
state => ({
user: state.user,
resource: state.resource
}),
dispatch => ({
...bindActionCreators({
loadResource: ResourceActions.load
}, dispatch)
})
)
export default class Main extends Component {
}

Http://www.jianshu.com/p/94c988cf11f3


1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ