React、redux、react-redux の使い方の詳細な説明-jsチュートリアル-php.cn

React、redux、react-redux の使い方の詳細な説明

php中世界最好的语言

リリース： 2018-04-28 15:24:32

オリジナル

1521 人が閲覧しました

今回はreact、redux、react-reduxの使い方について詳しく解説していきます。 React

一部の小規模なプロジェクトでは、Props と state を使用するだけでデータ管理が可能になります。では、いつ Redux を導入する必要があるでしょうか。コンポーネントをレンダリングするためのデータが props を通じて親コンポーネントから取得される場合、通常は A --> B ですが、ビジネスの複雑さが増すと、次のようになります。 A --> B -- > C -- > D --> E の場合、E が必要とするデータは A から props を介して渡される必要があり、対応する E --> A はコールバックを逆に渡します。コンポーネント BCD はこれらのデータを必要としませんが、これらのデータを通過させる必要があります。これは確かに少し不快です。また、渡された props とコールバックは BCD コンポーネントの再利用にも影響します。あるいは、兄弟コンポーネントが特定のデータを共有したい場合、それを転送したり取得したりするのはあまり便利ではありません。このような場合にはReduxを導入する必要があります。

実際、 A --> B --> C --> D --> E この場合、React は props をレイヤーごとに渡すことなく、Context を使用するだけでデータを取得できます。後で説明する React-redux は、Context を使用して、各サブコンポーネントがストア内のデータを取得できるようにします。

Redux

実際には、誰もがそれを取得して変更できる共有データを保存する場所を見つけたいだけです。すべての変数に入れても大丈夫でしょうか？はい、もちろん機能しますが、あまりにも洗練されておらず、安全ではありません。誰でもアクセスして変更できるため、友人によって誤って上書きされる可能性があります。グローバル変数が機能しない場合は、プライベート変数を使用してください。プライベート変数は簡単に変更できません。すぐにクロージャを思い浮かべますか...

次に、次を満たす関数を作成する必要があります:

オブジェクト

外部の世界はこのデータにアクセスできます
外部の世界もこのデータを変更できます
データが変更された場合は、購読者に通知します

function createStore(reducer, initialState) {
 // currentState就是那个数据
 let currentState = initialState;
 let listener = () => {};
 function getState() {
 return currentState;
 }
 function dispatch(action) {
 currentState = reducer(currentState, action); // 更新数据
 listener(); // 执行订阅函数
 return action;
 }
 function subscribe(newListener) {
 listener = newListener;
 // 取消订阅函数
 return function unsubscribe() {
  listener = () => {};
 };
 }
 return {
 getState,
 dispatch,
 subscribe
 };
}
const store = createStore(reducer);
store.getState(); // 获取数据
store.dispatch({type: 'ADD_TODO'}); // 更新数据
store.subscribe(() => {/* update UI */}); // 注册订阅函数

ログイン後にコピー

データを更新する手順:

What: 何をしたいのか---dispatch(action)

How: やり方、結果---reducer(oldState, action) => newState
Then?: Re - サブスクリプション機能を実行します (レンダリング UI の再実行など)
このようにして、ストアが実装され、外部アクセス、変更などのためにデータストレージセンターが提供されます。これが主なアイデアです。リダックス。したがって、Redux は React と本質的な関係はありません。通常は他のライブラリと組み合わせて使用できます。 Redux のデータ管理方法は React のデータ駆動型ビューの概念と非常に一致しており、この 2 つを組み合わせることで開発が非常に便利になります。

React-Redux

グローバル変数には多くの欠点があるため、アイデアを変更して、各サブコンポーネントが最上位の props にアクセスできる限り、ストアを React アプリケーションの最上位の props に直接統合しましょう。これ:

<TopWrapComponent store={store}>
 <App />
</TopWrapComponent>,

ログイン後にコピー

React はそのようなフック、Context を提供するだけで、その使用法は公式デモを見れば理解できるでしょう。各サブコンポーネントがストアに簡単にアクセスできるようになったので、次のステップでは、サブコンポーネントがストアで使用されるデータを取り出し、変更し、UI などを更新するためにサブスクライブします。明らかに、各サブコンポーネントはこれを再度実行する必要があります。より便利な方法、つまり高次のコンポーネントが必要です。上位コンポーネントを通じてstore.getState()、store.dispatch、およびstore.subscribeをカプセル化することにより、サブコンポーネントはストアを認識しません。サブコンポーネントは通常、propsを使用してデータを取得し、コールバックをトリガーしてコールバックをトリガーします。店舗の存在もございません。

以下は、この上位コンポーネントの大まかな実装です:

function connect(mapStateToProps, mapDispatchToProps) {
 return function(WrappedComponent) {
 class Connect extends React.Component {
  componentDidMount() {
  // 组件加载完成后订阅store变化，如果store有变化则更新UI
  this.unsubscribe = this.context.store.subscribe(this.handleStoreChange.bind(this));
  }
  componentWillUnmount() {
  // 组件销毁后，取消订阅事件
  this.unsubscribe();
  }
  handleStoreChange() {
  // 更新UI
  this.forceUpdate();
  }
  render() {
  return (
   <WrappedComponent
   {...this.props}
   {...mapStateToProps(this.context.store.getState())} // 参数是store里面的数据
   {...mapDispatchToProps(this.context.store.dispatch)} // 参数是store.dispatch
   />
  );
  }
 }
 Connect.contextTypes = {
  store: PropTypes.object
 };
 return Connect;
 };
}

ログイン後にコピー

connect を使用する場合、2 つの関数、mapStateToProps と mapDispatchToProps などの定型コードを記述する必要があることがわかります:

const mapStateToProps = state => {
 return {
 count: state.count
 };
};
const mapDispatchToProps = dispatch => {
 return {
 dispatch
 };
};
export default connect(mapStateToProps, mapDispatchToProps)(Child);
// 上述代码执行之后，可以看到connect函数里面的
 <WrappedComponent
 {...this.props}
 {...mapStateToProps(this.context.store.getState())}
 {...mapDispatchToProps(this.context.store.dispatch)}
 />
// 就变成了
 <WrappedComponent
 {...this.props}
 {count: store.getState().count}
 {dispatch: store.dispatch}
 />
// 这样，子组件Child的props里面就多了count和dispatch两个属性
// count可以用来渲染UI，dispatch可以用来触发回调

ログイン後にコピー

So，这样就OK了？OK了。通过一个闭包生成一个数据中心store，然后把这个store绑定到React的顶层props里面，子组件通过HOC建立与顶层props.store的联系，进而获取数据、修改数据、更新UI。这里主要讲了一下三者怎么窜在一起的，如果想了解更高级的功能，比如redux中间件、reducer拆分、connect的其他参数等，可以去看一下对应的源码。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！