Dva: React Hooks 및 dva의 문제

에 만든 2019년 06월 27일 · 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. 규칙에 따라 프롬프트됩니다.
하지만 useEffect의 DependencyList에 디스패치를 추가하면 그 안의 요청이 계속해서 실행되는데, React Hooks를 dva와 함께 사용할 때 어떻게 작성해야 할까요?

wontfix

출처

iclae

❤2

가장 유용한 댓글

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

langer-man 에 2019년 08월 08일

👍6

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

Ryuurock 에 2019년 07월 01일

👍1

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 에 2019년 07월 02일

👎1

@UlyC 는 어디에서 제거되었습니까? 링크를 줄 수 있습니까?

Ryuurock 에 2019년 07월 02일

@UlyC 는 어디에서 제거되었습니까? 링크를 줄 수 있습니까?

내가 틀렸어.
https://reactjs.org/docs/hooks-reference.html 의 공식 React Hooks API에는 useDispatch() 사용법이 없습니다.
이것은 react-redux에서 가져오기 위한 react-redux https://react-redux.js.org/next/api/hooks#useddispatch 의 사용법입니다.
import { useDispatch } from 'react-redux'

UlyC 에 2019년 07월 02일

😕3

@UlyC 는 어디에서 제거되었습니까? 링크를 줄 수 있습니까?
내가 틀렸어.
https://reactjs.org/docs/hooks-reference.html 의 공식 React Hooks API에는 useDispatch() 사용법이 없습니다.
이것은 react-redux에서 가져오기 위한 react-redux https://react-redux.js.org/next/api/hooks#useddispatch 의 사용법입니다.
import { useDispatch } from 'react-redux'

= - 글쎄

Ryuurock 에 2019년 07월 02일

~ const dispatch = useDispatch(); hooks dva가 약속하지 않습니까? ~
효과는 dva의 약속에 추가됩니다.

yoyo837 에 2019년 07월 12일

dva/umi가 후크 통합을 고려했습니까? 사용하려면 이렇게 import { useDispatch } from 'react-redux' 를 사용해야 합니다. 구멍이 있을까요?

sqfbeijing 에 2019년 07월 12일

사용했는데 문제없어요

yoyo837 에 2019년 07월 12일

@yoyo837
````
'dva'에서 { useDispatch } 가져오기;

console.log('6:23:08 PM', useDispatch)
````
이렇게 undefined를 출력하는데 react-redux를 업그레이드 해야 하나요?어떤 버전으로?

sqfbeijing 에 2019년 07월 12일

dva 최신 베타 업그레이드

yoyo837 에 2019년 07월 12일

당신은 더 나은 릴리스를보고

yoyo837 에 2019년 07월 12일

업그레이드 후 문서를 업데이트하고 싶은데 useDispatch 함수가 무엇을 하는지 모르겠습니다.

furylee 에 2019년 07월 23일

dva 은 react-redux useDispatch 에서 직접 파생됩니다. react-redux 문서를 보면 됩니다.

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

yoyo837 에 2019년 07월 23일

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

langer-man 에 2019년 08월 08일

👍6

1. dva를 최신 버전으로 업그레이드합니다(내 버전은 2.6.0-beta.12).
2.

참조 주소: https://react-redux.js.org/api/hooks
도움이 되기를 바랍니다

lanceMe 에 2019년 08월 30일

👍4 👀2

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 에 2019년 09월 02일

@wangzhipeng404 후크를 사용하고 구성 요소를 연결할 필요가 없습니다.

yoyo837 에 2019년 09월 02일

👍3

하지만 pro 프레임워크의 레이아웃과 블록은 conect를 사용합니다. 직접 변경해야 합니까? 이러한 유형의 오류를 빠르게 수정할 수 있는 방법이 있습니까?

wangzhipeng404 에 2019년 09월 02일

간단한 테스트 케이스를 작성했는데 다음 코드는 정상적으로 작성되어 정상적으로 사용할 수 있습니다

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 에 2019년 10월 01일

@liudonghua123 이 이번에는 dva 소스코드를 살펴보듯 재빨리 묻는다.아래 코드는 dva를 사용하지 않으며 react-redux에서 요구하는 대로 작동하지 않습니다., dva를 사용하여 이 작업을 수행합니다. 사용할 수 있다면 이상합니다.

yoyo837 에 2019년 10월 01일

@liudonghua123 위의 소위 사용 가능한 예제는 dva 초기화를 로드하지 않고는 사용할 수 없으며 dva는 connect, useSelector 및 기타 react-redux 메서드를 직접 내보냅니다.

yoyo837 에 2019년 10월 01일

👍1

@yoyo837 위에서 정상적으로 사용할 수 있는 코드는 코드의 일부이고 dva 초기화 부분은 다른 곳에 있으며 여기에 다 쓰지는 않았습니다. 코드는 https://dvajs.com/guide/getting- 을 참조하여 작성되었습니다. https://github.com/liudonghua123/dva-quickstart/blob/hooks/src/routes/Products.js 후크 분기에 문제가 있고 마스터 분기를 정상적으로 사용할 수 있습니다.

liudonghua123 에 2019년 10월 02일

위에서 언급한 대로 dva 에서 2.6.0-beta.14 로 업데이트를 시도했는데 코드를 수정하지 않고 정상적으로 사용할 수 있지만 통합을 위해 useSelector , useDispatch 에서 변경되었습니다. dva 내보내기는 모든 수정 사항이 조금 더 좋습니다.
https://github.com/liudonghua123/dva-quickstart/commit/f9bd1dd1332e62739d15050c4d50bc069a7fb58f

liudonghua123 에 2019년 10월 02일

👍2 😄1

하지만 pro 프레임워크의 레이아웃과 블록은 conect를 사용합니다. 직접 변경해야 합니까? 이러한 유형의 오류를 빠르게 수정할 수 있는 방법이 있습니까?

안녕하세요, 이 문제를 해결하셨나요?antd-pro-ts에 사용된 dva_beta 버전이 오류를 보고하는 것 같습니다.

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

안에 내용물이 많이 들어있는 느낌

LbhFront-end 에 2019년 11월 07일

@liudonghua123 위의 소위 사용 가능한 예제는 dva 초기화를 로드하지 않고는 사용할 수 없으며 dva는 connect, useSelector 및 기타 react-redux 메서드를 직접 내보냅니다.

말이 돼 진짜 섞일 수 없을 것 같아 같은 원리가 아니야

LbhFront-end 에 2019년 11월 07일

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.
저도 이문제인데 해결하셨나요?