Question

当前，我正在使用带有挂钩的功能组件，但仍通过connect HOC调度我的动作。

我使用useDispatch仔细阅读了文档，但是不确定如何将其合并到我的代码中。从示例中，它们将在组件内部传递操作类型和有效负载。为了使用Dispatch，我是否必须将myOfferActions函数移回组件？

MyOffers组件

import React, { useEffect } from "react";
import { connect, useSelector } from "react-redux";
import "./MyOffers.scss";
import MyOfferCard from "../../components/MyOfferCard/MyOfferCard";
import { fetchMyOffers } from "../../store/actions/myOffersActions";

const MyOffers = (props) => {
  const myOffers = useSelector((state) => state.myOffers.myOffers);

  useEffect(() => {
    props.fetchMyOffers();
  }, []);

  return (
    <div className="my-offers-main">
      <h1>My offers</h1>
      {myOffers && (
        <div className="my-offer-container">
          {myOffers.map((offer) => (
            <MyOfferCard key={offer.id} offer={offer} />
          ))}
        </div>
      )}  
    </div>
  );
};

export default connect(null, { fetchMyOffers })(MyOffers);

offerActions

export const fetchMyOffers = () => async (dispatch) => {
  const userId = localStorage.getItem("userId");
  try {
    const result = await axiosWithAuth().get(`/offers/${userId}`);
    let updatedData = result.data.map((offer) => {
      //doing some stuff
      };
    });
    dispatch(updateAction(FETCH_MY_OFFERS, updatedData));
  } catch (error) {
    console.log(error);
  }
};

offerReducer

import * as types from "../actions/myOffersActions";

const initialState = {
  offerForm: {},
  myOffers: [],
};

function myOffersReducer(state = initialState, action) {
  switch (action.type) {
    case types.FETCH_MY_OFFERS:
      return {
        ...state,
        myOffers: action.payload,
      };
    default:
      return state;
  }
}

export default myOffersReducer;

Answer 1

使用Redux钩子时，我认为您不需要connect。

您只需要像下面这样调用useDispatch： const dispatch = useDispatch();

并通过提供标识动作的对象来使用该功能：

dispatch({ type: 'SOME_ACTION', payload: 'my payload'});

它也应该与redux-thunk一起工作（我想这就是您正在使用的）：dispatch(fetchMyOffers())

在没有连接HOC的情况下将redux与react-hooks一起使用

1 个答案: