Dva: مشاكل في React Hooks و dva

useDispatch ، بعد استخدام الخطافات ، لا تحتاج إلى الاتصال ، ولكن لكي تكون كسولًا ، قمت بإخراج جميع المؤثرات والمخفضات من المتجر ، وبحثت في مساحة الاسم وأعدت جميع الإجراءات ، راجع:

function useActions(namespace) {
  const dispatch = useDispatch();

  const actions = useMemo(() => {
    const { _models } = getStore();
    const targetModel = _models.find(model => model.namespace === namespace);
    return targetModel ? Object.keys({ ...targetModel.effects, ...targetModel.reducers }).reduce((prev, curre) => {
      const actionName = curre.replace(new RegExp(`^${namespace}/`), '');
      prev[actionName] = payload => dispatch({ type: curre, payload });
      return prev;
    }, {}) : {};
  }, [namespace, dispatch]);

  return actions;
}

useDispatch ، بعد استخدام الخطافات ، لا تحتاج إلى الاتصال ، ولكن لكي تكون كسولًا ، قمت بإخراج جميع المؤثرات والمخفضات من المتجر ، وبحثت في مساحة الاسم وأعدت جميع الإجراءات ، راجع:

function useActions(namespace) {
  const dispatch = useDispatch();

  const actions = useMemo(() => {
    const { _models } = getStore();
    const targetModel = _models.find(model => model.namespace === namespace);
    return targetModel ? Object.keys({ ...targetModel.effects, ...targetModel.reducers }).reduce((prev, curre) => {
      const actionName = curre.replace(new RegExp(`^${namespace}/`), '');
      prev[actionName] = payload => dispatch({ type: curre, payload });
      return prev;
    }, {}) : {};
  }, [namespace, dispatch]);

  return actions;
}

يبدو أن المسؤولين قد أزالوا استخدام useDispatch ().
حاليا
استخدم بهذه الطريقة

أين تمت إزالة UlyC ، هل يمكنك إعطاء رابط؟

أين تمت إزالة UlyC ، هل يمكنك إعطاء رابط؟

كنت مخطئا.
لا يوجد استخدام useDispatch () في واجهة برمجة تطبيقات React Hooks الرسمية على https://reactjs.org/docs/hooks-reference.html ،
هذا هو استخدام رد الفعل - redux https://react-redux.js.org/next/api/hooks#useddispatch ، للاستيراد من رد الفعل-الإعادة
import { useDispatch } from 'react-redux'

أين تمت إزالة UlyC ، هل يمكنك إعطاء رابط؟

كنت مخطئا.
لا يوجد استخدام useDispatch () في واجهة برمجة تطبيقات React Hooks الرسمية على https://reactjs.org/docs/hooks-reference.html ،
هذا هو استخدام رد الفعل - redux https://react-redux.js.org/next/api/hooks#useddispatch ، للاستيراد من رد الفعل-الإعادة
import { useDispatch } from 'react-redux'

= - حسنا

~ const dispatch = useDispatch(); خطافات لا تجعلها وعدًا؟ ~
يضاف التأثير إلى Promise في dva

هل اعتبر dva / umi دمج الخطافات؟ إذا كنت تريد استخدامه ، فهل يجب عليك استخدام import { useDispatch } from 'react-redux' مثل هذا. هل سيكون هناك ثقوب.

لقد استخدمتها ، لا مشكلة

يويو
""
استيراد {useDispatch} من "dva" ؛

console.log ('6:23:08 PM'، useDispatch)
""
أنا أطبع مثل هذا غير معرف. هل يجب أن أقوم بترقية رد الفعل والإعادة؟إلى أي إصدار؟

ترقية أحدث إصدار تجريبي dva

من الأفضل أن تشاهد الإصدارات

آمل أن أقوم بتحديث المستند بعد الترقية ، فلم أعرف ما الذي تقوم به وظيفة useDispatch.

مشتق dva مباشرة من react-redux useDispatch ، يمكنك فقط إلقاء نظرة على مستند react-redux

https://react-redux.js.org/api/hooks#useddispatch

https://www.npmjs.com/package/dva-react-hook

1. قم بترقية dva إلى أحدث إصدار (إصداري هو 2.6.0-beta.12)
2.

العنوان المرجعي: https://react-redux.js.org/api/hooks
اتمنى ان اكون مفيد

تمت ترقية Antd Pro V4 إلى 2.6beta 12 ويمكن استخدامه بشكل طبيعي ، لكن نوع تقرير الاتصال خاطئ ، فيما يلي رسالة الخطأ TableList ، كيف يمكن إصلاحها؟

作为表达式调用时，无法解析类修饰器的签名。
  不能将类型“ConnectedComponentClass<typeof TableList, Pick<TableListProps, "form" | "wrappedComponentRef">>”分配给类型“typeof TableList”。
    Type 'Component<Pick<TableListProps, "form" | "wrappedComponentRef">, any, any>' is missing the following properties from type 'TableList': columns, handleStandardTableChange, handleFormReset, toggleForm, and 10 more.

@ wangzhipeng404 استخدم الخطافات ولا حاجة لتوصيل المكونات

لكن تصميم وكتلة إطار العمل الاحترافي يستخدمان ، هل يجب علي تغييرهما بنفسي ، هل هناك أي طريقة لإصلاح هذه الأنواع من الأخطاء بسرعة

لقد كتبت حالة اختبار بسيطة ، الكود التالي مكتوب بالطريقة العادية ويمكن استخدامه بشكل طبيعي

import React, { Component } from 'react';
import { connect } from 'dva';
import ProductList from '../components/ProductList';

@connect(({ products }) => ({
  products,
}))
export default class Products extends Component {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'products/fetch',
    });
  }
  handleDelete = id => {
    const { dispatch } = this.props;
    dispatch({
      type: 'products/delete',
      payload: id,
    });
  };
  render() {
    const { products } = this.props;
    return (
      <div>
        <h2>List of Products</h2>
        <ProductList onDelete={this.handleDelete} products={products} />
      </div>
    );
  }
}

لاحقًا ، أشرت إلى https://react-redux.js.org/next/api/hooks وأردت إعادة كتابته في الخطافات

import React, { useEffect } from 'react';
// import { connect } from 'dva';
import ProductList from '../components/ProductList';
import { useSelector, useDispatch } from 'react-redux';

// https://react-redux.js.org/next/api/hooks

export default function Products() {
  console.info(`useDispatch: `,useDispatch)
  const dispatch = useDispatch();
  const products = useSelector(state => state.products);
  useEffect(() => {
    dispatch({
      type: 'products/fetch',
    });
  });
  const handleDelete = id => {
    dispatch({
      type: 'products/delete',
      payload: id,
    });
  };
  return (
    <div>
      <h2>List of Products</h2>
      <ProductList onDelete={handleDelete} products={products} />
    </div>
  );
}

لكن هذه المرة يعطي خطأ

نأمل بقوة في دعم الخطافات

@ liudonghua123 يسأل هذه المرة بأسرع ما يمكن إلقاء نظرة على شفرة مصدر dva.الكود الخاص بك أدناه لا يستخدم dva ولا يعمل كما هو مطلوب بواسطة رد الفعل-الإعادة، استخدم dva للقيام بذلك نيابة عنك ، فمن الغريب أن تتمكن من استخدامه.

@ liudonghua123 من المستحيل استخدام ما يسمى بالمثال القابل للاستخدام أعلاه بدون تحميل تهيئة dva ، وتقوم dva بتصدير الاتصال ، useSelector وطرق أخرى لإعادة الإرسال.

@ yoyo837 الكود الذي يمكنني استخدامه عادةً أعلاه هو جزء من الكود ، وجزء تهيئة dva موجود في مكان آخر ، ولم أكتبه جميعًا هنا ، تمت كتابة الكود بالإشارة إلى https://dvajs.com/guide/getting- بدأ .

لقد جربت التحديث من dva إلى 2.6.0-beta.14 كما هو مذكور أعلاه ، يمكن استخدام الكود بشكل طبيعي بدون تعديل ، ولكن للتوحيد ، تم تغيير useSelector ، useDispatch من تصدير dva أفضل قليلاً من جميع التعديلات
https://github.com/liudonghua123/dva-quickstart/commit/f9bd1dd1332e62739d15050c4d50bc069a7fb58f

لكن تصميم وكتلة إطار العمل الاحترافي يستخدمان ، هل يجب علي تغييرهما بنفسي ، هل هناك أي طريقة لإصلاح هذه الأنواع من الأخطاء بسرعة

مرحبا هل حللت هذه المشكلة؟يبدو أن إصدار dva_beta المستخدم في antd-pro-ts يبلغ عن خطأ

could not find react-redux context value; please ensure the component is wrapped in a <Provider>

يبدو أن الكثير من الأشياء معبأة في الداخل

@ liudonghua123 من المستحيل استخدام ما يسمى بالمثال القابل للاستخدام أعلاه بدون تحميل تهيئة dva ، وتقوم dva بتصدير الاتصال ، useSelector وطرق أخرى لإعادة الإرسال.

إنه أمر منطقي ، لا يبدو أنه قادر حقًا على مزجها ، إنه ليس نفس المبدأ

تمت ترقية Antd Pro V4 إلى 2.6beta 12 ويمكن استخدامه بشكل طبيعي ، لكن نوع تقرير الاتصال خاطئ ، فيما يلي رسالة الخطأ TableList ، كيف يمكن إصلاحها؟

作为表达式调用时，无法解析类修饰器的签名。
  不能将类型“ConnectedComponentClass<typeof TableList, Pick<TableListProps, "form" | "wrappedComponentRef">>”分配给类型“typeof TableList”。
    Type 'Component<Pick<TableListProps, "form" | "wrappedComponentRef">, any, any>' is missing the following properties from type 'TableList': columns, handleStandardTableChange, handleFormReset, toggleForm, and 10 more.

لدي هذه المشكلة أيضًا ، هل قمت بحلها؟

مع الخطاف ، لا تحتاج إلى استخدام الاتصال مرة أخرى.

مع الخطاف ، لا تحتاج إلى استخدام الاتصال مرة أخرى.

حسنًا ، لكن تمت كتابة المشروع بمكونات الفصل من قبل ، وكان عبء العمل لإعادة البناء باستخدام الخطافات ثقيلًا بعض الشيء ، وهذا النوع من التحذير يبدو مزعجًا للغاية

تم وضع علامة على هذه المشكلة تلقائيًا على أنها قديمة نظرًا لعدم وجود نشاط حديث لها. سيتم إغلاقه إذا لم يحدث أي نشاط آخر. شكرا لمساهماتكم.

https://github.com/dvajs/dva/issues/2140#issuecomment -507620628 سعيد لسماع