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?
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() в официальном 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'
вот так. Будут ли дыры.
Я пользовался, без проблем
@yoyo837
````
импорт {useDispatch} из 'dva';
console.log('18:23:08', useDispatch)
````
Я распечатываю undefined вот так, стоит ли обновлять react-redux?к какой версии?
обновить последнюю бета-версию dva
лучше смотри выпуски
Я надеюсь обновить документ после обновления.Я не понял, что делает функция useDispatch.
dva
является прямым производным от react-redux
useDispatch
, вы можете просто посмотреть документ react-redux
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 Используйте хуки и не нужно подключать компоненты
А вот макет и блок про фреймворка используют 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>
);
}
Но на этот раз выдает ошибку
Очень надеемся на поддержку крючков
@liudonghua123 спрашивает на этот раз так же быстро, как взглянет на исходный код 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.
У меня тоже такая проблема, ты решил?
С хуком вам не нужно снова использовать соединение.
С хуком вам не нужно снова использовать соединение.
Ну, но проект раньше писался с классовыми компонентами, а работа по рефакторингу с хуками немного тяжелая, и такой тип предупреждений выглядит слишком раздражающим.
Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время в ней не было активности. Он будет закрыт, если никакой дальнейшей активности не произойдет. Спасибо за ваш вклад.
https://github.com/dvajs/dva/issues/2140#issuecomment -507620628 Рад слышать
Самый полезный комментарий
https://www.npmjs.com/package/dva-реакт-хук