Dva: Masalah dengan React Hooks dan dva

useDispatch, setelah menggunakan kait, Anda tidak perlu terhubung, tetapi untuk malas, saya mengeluarkan semua efek dan reduksi dari toko, mencari melalui namespace dan mengembalikan semua tindakan, lihat:

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, setelah menggunakan kait, Anda tidak perlu terhubung, tetapi untuk malas, saya mengeluarkan semua efek dan reduksi dari toko, mencari melalui namespace dan mengembalikan semua tindakan, lihat:

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;
}

Pejabat tampaknya telah menghapus penggunaan useDispatch().
Sekarang
gunakan cara ini

Di mana @UlyC dihapus, dapatkah Anda memberikan tautan?

Di mana @UlyC dihapus, dapatkah Anda memberikan tautan?

Saya salah.
Tidak ada penggunaan useDispatch() di React Hooks API resmi di https://reactjs.org/docs/hooks-reference.html ,
Ini adalah penggunaan react-redux https://react-redux.js.org/next/api/hooks#useddispatch , untuk mengimpor dari react-redux
import { useDispatch } from 'react-redux'

Di mana @UlyC dihapus, dapatkah Anda memberikan tautan?

Saya salah.
Tidak ada penggunaan useDispatch() di React Hooks API resmi di https://reactjs.org/docs/hooks-reference.html ,
Ini adalah penggunaan react-redux https://react-redux.js.org/next/api/hooks#useddispatch , untuk mengimpor dari react-redux
import { useDispatch } from 'react-redux'

= - baiklah

~ const dispatch = useDispatch(); hooks Jangan berjanji? ~
Efeknya ditambahkan ke Janji di dva

Apakah dva/umi mempertimbangkan untuk mengintegrasikan kait? Jika Anda ingin menggunakannya, apakah Anda harus menggunakan import { useDispatch } from 'react-redux' seperti ini. Apakah akan ada lubang.

Saya menggunakannya, tidak masalah

@yoyo837
````
impor { useDispatch } dari 'dva';

console.log('6:23:08', gunakanDispatch)
````
Saya mencetak tidak terdefinisi seperti ini. Haruskah saya memutakhirkan reaksi-redux?ke versi yang mana?

perbarui dva beta terbaru

Anda lebih baik menonton rilis

Saya berharap untuk memperbarui dokumen setelah pemutakhiran. Saya belum tahu apa yang dilakukan fungsi useDispatch.

dva langsung diturunkan dari react-redux useDispatch , Anda bisa melihat dokumen react-redux

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

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

1. Upgrade dva ke versi terbaru (versi saya 2.6.0-beta.12)
2.

Alamat referensi: https://react-redux.js.org/api/hooks
semoga bermanfaat

Antd Pro V4 sudah diupgrade ke 2.6beta 12 dan bisa digunakan secara normal, tapi tipe connect report salah Berikut ini adalah pesan error dari TableList, bagaimana cara memperbaikinya?

作为表达式调用时，无法解析类修饰器的签名。
  不能将类型“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 Gunakan pengait dan tidak perlu menyambungkan komponen

Tetapi tata letak dan blok kerangka kerja pro menggunakan koneksi, apakah saya harus mengubahnya sendiri, apakah ada cara untuk memperbaiki kesalahan jenis ini dengan cepat

Saya menulis kasus uji sederhana, kode berikut ditulis dengan cara biasa dan dapat digunakan secara normal

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>
    );
  }
}

Kemudian, saya merujuk ke https://react-redux.js.org/next/api/hooks dan ingin menulis ulang menjadi kait

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>
  );
}

Tapi kali ini memberikan kesalahan

Sangat berharap untuk mendukung kait

@liudonghua123 bertanya kali ini secepat melihat kode sumber dva.Kode Anda di bawah ini tidak menggunakan dva dan tidak berfungsi seperti yang disyaratkan oleh react-redux, Gunakan dva untuk melakukan ini untuk Anda, aneh jika Anda dapat menggunakannya.

@liudonghua123 Yang disebut contoh yang dapat digunakan di atas tidak mungkin digunakan tanpa memuat inisialisasi dva, dan dva langsung mengekspor koneksi, useSelector, dan metode reaksi-redux lainnya.

@yoyo837 Kode yang bisa saya gunakan biasanya di atas adalah bagian dari kode, bagian inisialisasi dva ada di tempat lain, saya tidak menulis semuanya di sini, kode ditulis dengan mengacu pada https://dvajs.com/guide/getting- start.html , Saya Baru saja mengunggah ke github, https://github.com/liudonghua123/dva-quickstart/blob/hooks/src/routes/Products.js , cabang kait bermasalah, cabang master dapat digunakan secara normal

Saya mencoba pembaruan dari dva ke 2.6.0-beta.14 seperti yang disebutkan di atas, kode dapat digunakan secara normal tanpa modifikasi, tetapi untuk penyatuan, useSelector , useDispatch diubah dari dva ekspor sedikit lebih baik semua modifikasi adalah
https://github.com/liudonghua123/dva-quickstart/commit/f9bd1dd1332e62739d15050c4d50bc069a7fb58f

Tetapi tata letak dan blok kerangka kerja pro menggunakan koneksi, apakah saya harus mengubahnya sendiri, apakah ada cara untuk memperbaiki kesalahan jenis ini dengan cepat

Hai, apakah Anda sudah memecahkan masalah ini?Versi dva_beta yang digunakan di antd-pro-ts tampaknya melaporkan kesalahan

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

Rasanya seperti banyak barang yang dikemas di dalam

@liudonghua123 Yang disebut contoh yang dapat digunakan di atas tidak mungkin digunakan tanpa memuat inisialisasi dva, dan dva langsung mengekspor koneksi, useSelector, dan metode reaksi-redux lainnya.

Masuk akal, sepertinya benar-benar tidak bisa mencampurnya, itu bukan prinsip yang sama

Antd Pro V4 sudah diupgrade ke 2.6beta 12 dan bisa digunakan secara normal, tapi tipe connect report salah Berikut ini adalah pesan error dari TableList, bagaimana cara memperbaikinya?

作为表达式调用时，无法解析类修饰器的签名。
  不能将类型“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.

Saya memiliki masalah ini juga, apakah Anda menyelesaikannya?

Dengan hook, Anda tidak perlu menggunakan connect lagi.

Dengan hook, Anda tidak perlu menggunakan connect lagi.

Yah, tetapi proyek itu ditulis dengan komponen kelas sebelumnya, dan beban kerja refactoring dengan kait agak berat, dan jenis peringatan ini terlihat terlalu mengganggu

Masalah ini secara otomatis ditandai sebagai basi karena tidak ada aktivitas terbaru. Ini akan ditutup jika tidak ada aktivitas lebih lanjut yang terjadi. Terima kasih atas kontribusi Anda.

https://github.com/dvajs/dva/issues/2140#issuecomment -507620628 Senang mendengarnya