Dva: Проблемы с React Hooks и dva

Созданный на 27 июн. 2019  ·  30Комментарии  ·  Источник: dvajs/dva

import { connect } from 'dva';
import React, { useEffect } from 'react';

const Page = props => {
  const { dispatch, text } = props;
  useEffect(() => {
    dispatch({ type: 'xxx/fetchText' });
  }, []);

 return <div>{text}</div>
}

export default connect(({ xxx }) => ({ text: xxx.text }))(Page);

Если так написано, то при проверке будет подсказано правило react-hooks/exhaustive-deps React Hook useEffect has a missing dependency: dispatch.
Но если диспетчер добавить в DependencyList of useEffect, то запросы в нем будут выполняться постоянно, как мне его написать при использовании React Hooks в сочетании с dva?

Самый полезный комментарий

Все 30 Комментарий

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

image
Официальные лица, похоже, отказались от использования useDispatch().
Сейчас
imageиспользовать этот путь

Где удален @UlyC , можно ссылку?

Где удален @UlyC , можно ссылку?

Я был неправ.
Использование useDispatch() в официальном API React Hooks по адресу https://reactjs.org/docs/hooks-reference.html не используется.
Это использование react-redux https://react-redux.js.org/next/api/hooks#useddispatch для импорта из react-redux
import { useDispatch } from 'react-redux'

Где удален @UlyC , можно ссылку?

Я был неправ.
Использование useDispatch() в официальном API React Hooks по адресу https://reactjs.org/docs/hooks-reference.html не используется.
Это использование react-redux https://react-redux.js.org/next/api/hooks#useddispatch для импорта из react-redux
import { useDispatch } from 'react-redux'

= - хорошо

~ const dispatch = useDispatch(); крючки Не два обещают? ~
Эффект добавлен к Promise в два

Думал ли dva/umi об интеграции хуков? Если вы хотите использовать его, вам нужно использовать import { useDispatch } from 'react-redux' вот так. Будут ли дыры.

image

Я пользовался, без проблем

@yoyo837
````
импорт {useDispatch} из 'dva';

console.log('18:23:08', useDispatch)
````
Я распечатываю undefined вот так, стоит ли обновлять react-redux?к какой версии?

обновить последнюю бета-версию dva

лучше смотри выпуски

Я надеюсь обновить документ после обновления.Я не понял, что делает функция useDispatch.

dva является прямым производным от react-redux useDispatch , вы можете просто посмотреть документ react-redux

image

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

1. Обновите dva до последней версии (у меня версия 2.6.0-beta.12)
2.image

Ссылочный адрес: 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 Используйте хуки и не нужно подключать компоненты

А вот макет и блок про фреймворка используют conect, нужно ли самому их менять, есть ли способ быстро исправить такие ошибки

Я написал простой тестовый пример, следующий код написан обычным образом и может использоваться как обычно

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

Но на этот раз выдает ошибку

image

Очень надеемся на поддержку крючков

@liudonghua123 спрашивает на этот раз так же быстро, как взглянет на исходный код dva.В приведенном ниже коде не используется dva, и он не соответствует требованиям реакции-редукции., Используйте dva, чтобы сделать это за вас, странно, если вы можете его использовать.

@ liudonghua123 Приведенный выше так называемый полезный пример невозможно использовать без загрузки инициализации dva, а dva просто напрямую экспортирует connect, useSelector и другие методы react-redux.

@yoyo837 Код, который я обычно могу использовать выше, является частью кода, часть инициализации dva находится в другом месте, я не писал все это здесь, код написан со ссылкой на https://dvajs.com/guide/getting- start.html , я только что загрузил на github, https://github.com/liudonghua123/dva-quickstart/blob/hooks/src/routes/Products.js , ветка hooks проблематична, ветку master можно использовать нормально

Пробовал обновление с dva до 2.6.0-beta.14 как указано выше, код можно нормально использовать без модификаций, но для унификации, useSelector , useDispatch изменен с dva экспорт чуть лучше все модификации
https://github.com/liudonghua123/dva-quickstart/commit/f9bd1dd1332e62739d15050c4d50bc069a7fb58f

А вот макет и блок про фреймворка используют conect, нужно ли самому их менять, есть ли способ быстро исправить такие ошибки

Привет, ты решил эту проблему?Версия dva_beta, используемая в antd-pro-ts, похоже, сообщает об ошибке

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

Такое ощущение, что внутри много всего упаковано

@ liudonghua123 Приведенный выше так называемый полезный пример невозможно использовать без загрузки инициализации dva, а dva просто напрямую экспортирует connect, useSelector и другие методы react-redux.

Это имеет смысл, это действительно кажется, что это не может быть смешано, это не тот же принцип.

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.

У меня тоже такая проблема, ты решил?

С хуком вам не нужно снова использовать соединение.

С хуком вам не нужно снова использовать соединение.

Ну, но проект раньше писался с классовыми компонентами, а работа по рефакторингу с хуками немного тяжелая, и такой тип предупреждений выглядит слишком раздражающим.

Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время в ней не было активности. Он будет закрыт, если никакой дальнейшей активности не произойдет. Спасибо за ваш вклад.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги