反応、redux、react-redux を使用する

今回はreact、redux、react-reduxの使用上の注意点を紹介します。実際の事例を見てみましょう。

この記事では、react、redux、react-redux の関係を紹介します。詳細は次のとおりです。

React

一部の小規模なプロジェクトでは、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

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

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

1. オブジェクト

2. 外部の世界はこのデータにアクセスできます

3. 外部の世界もこのデータを変更できます

4. データが変更された場合は、購読者に通知します

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 */}); // 注册订阅函数

データを更新する手順:

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

2. How: やり方、実行の結果 ---reducer(oldState, action) => newState

3. その後?:サブスクリプション機能を再実行します (UI の再レンダリングなど)

このようにして、ストアが実装され、外部アクセス、変更などのためにデータ ストレージ センターが提供されます。これが主なアイデアです。リダックス。 したがって、Redux は React と本質的な関係はありません。通常は他のライブラリと組み合わせて使用​​できます。 Redux のデータ管理方法は React のデータ駆動型ビューの概念と非常に一致しており、この 2 つを組み合わせることで開発が非常に便利になります。

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

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中文网其它相关文章！

推荐阅读：

怎样做出鼠标点击处心形图案漂浮

JS操作JSON数组去重

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