Dva: Reactフックと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はどこで削除されますか、リンクを教えていただけますか？

私は間違っていた。
https://reactjs.org/docs/hooks-reference.htmlにある公式のReactHooksAPIではuseDispatch（）の使用法はありません。
これは、react-reduxからインポートするためのreact-reduxhttps : //react-redux.js.org/next/api/hooks#useddispatchの使用法です。
import { useDispatch } from 'react-redux'

@UlyCはどこで削除されますか、リンクを教えていただけますか？

私は間違っていた。
https://reactjs.org/docs/hooks-reference.htmlにある公式のReactHooksAPIではuseDispatch（）の使用法はありません。
これは、react-reduxからインポートするためのreact-reduxhttps : //react-redux.js.org/next/api/hooks#useddispatchの使用法です。
import { useDispatch } from 'react-redux'

=-よく

〜 const dispatch = useDispatch();フックdvaはそれを約束しませんか？ 〜
エフェクトはdvaのPromiseに追加されます

dva / umiはフックの統合を検討しましたか？使用したい場合は、このようにimport { useDispatch } from 'react-redux' を使用する必要がありますか。穴はありますか？

使ってみました、問題ありません

@ yoyo837
`` ``
import {useDispatch} from'dva';

console.log（ '6:23:08 PM'、useDispatch）
`` ``
このように未定義を印刷します。react-reduxをアップグレードする必要がありますか？どのバージョンに？

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.2。

参照アドレス： https ：//react-redux.js.org/api/hooks
お役に立てば幸いです

Antd ProV4は2.6beta12にアップグレードされ、正常に使用できますが、接続レポートのタイプが間違っています。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を使用せず、react-reduxで必要とされるようには機能しません、dvaを使用してこれを実行します。使用できる場合は、奇妙です。

@ liudonghua123上記のいわゆる使用可能な例は、dva初期化をロードせずに使用することは不可能であり、dvaはconnect、useSelector、およびその他のreact-reduxのメソッドを直接エクスポートします。

@ yoyo837上記で通常使用できるコードはコードの一部であり、dva初期化部分は別の場所にあります。ここではすべてを記述していません。コードは、 https： //dvajs.com/guide/getting-を参照して記述されています。 https：//github.com/liudonghua123/dva-quickstart/blob/hooks/src/routes/Products.js 、フックブランチに問題があり、マスターブランチは通常どおり使用できます

上記のようにdvaから2.6.0-beta.14に更新してみましたが、コードは変更なしで通常どおり使用できますが、統合のために、 useSelector 、 useDispatchがから変更されましたdvaエクスポートは少し良くなりますすべての変更は
https://github.com/liudonghua123/dva-quickstart/commit/f9bd1dd1332e62739d15050c4d50bc069a7fb58f

しかし、プロフレームワークのレイアウトとブロックは接続を使用しています。自分で変更する必要がありますか？これらのタイプのエラーをすばやく修正する方法はありますか？

こんにちは、この問題を解決しましたか？antd-pro-tsで使用されているdva_betaバージョンがエラーを報告しているようです

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

中にはたくさんのものが詰まっているような気がします

@ liudonghua123上記のいわゆる使用可能な例は、dva初期化をロードせずに使用することは不可能であり、dvaはconnect、useSelector、およびその他のreact-reduxのメソッドを直接エクスポートします。

それは理にかなっています、それは本当にそれを混ぜることができないようです、それは同じ原則ではありません

Antd ProV4は2.6beta12にアップグレードされ、正常に使用できますが、接続レポートのタイプが間違っています。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よろしくお願いします