React、redux、react-redux の関係は何ですか?

この記事では、react、redux、react-redux の関係について説明します。 、特定の参考値があり、困っている友人がそれを参照できます。お役に立てば幸いです。

React

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

実際には、 A --> B --> C --> D --> E この場合、React は 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
その後?: サブスクリプション機能を再実行します (UI の再レンダリングなど)
これはストアを実装し、外部アクセスや変更などのためのデータ ストレージ センターを提供します。これが主なアイデアです。リダックス。したがって、Redux は React と本質的な関係はありません。通常は他のライブラリと組み合わせて使用​​できます。 Redux のデータ管理方法は React のデータ駆動型ビューの概念と非常に一致しており、この 2 つを組み合わせることで開発が非常に便利になります。

データにアクセスする安全な場所ができたので、それを React に統合するにはどうすればよいでしょうか?アプリケーションの初期化時に window.store = createStore(reducer) を作成し、必要に応じて store.getState() を介してデータを取得し、store.dispatch を介してデータを更新し、store.subscribe を介してデータの変更をサブスクライブできます。 setState を実行します... これを多くの場所で実行すると、非常に膨大な作業になりますが、それでもグローバル変数の不適切さは避けられません。

React-Redux

グローバル変数には多くの欠点があるため、アイデアを変更して、ストアを React アプリケーションのトップレベル プロップに直接統合しましょう。各サブコンポーネントとして、次のようなトップレベルの小道具にアクセスできれば十分です。

<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的时候，我们知道要写一些样板化的代码，比如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 という 2 つの追加属性があります

// count は UI のレンダリングに使用でき、dispatch はコールバックのトリガーに使用できます。

それで、これは OK ですか?わかりました。クロージャを通じてデータ センター ストアを生成し、このストアを React のトップレベル props にバインドします。サブコンポーネントは HOC を通じてトップレベル props.store との接続を確立し、データの取得、データの変更、更新を行います。 UI。ここでは主に、これら 3 つがどのように接続されているかについて説明します。redux ミドルウェア、リデューサー分割、接続のその他のパラメーターなど、より高度な機能を知りたい場合は、対応するソース コードを参照してください。

以上がReact、redux、react-redux の関係は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。