[英]Using redux with react-hooks without the connect HOC
目前,我正在使用带有钩子的功能组件,但仍然使用 connect HOC 调度我的操作。
我使用 useDispatch 通读了文档,但不确定如何将其合并到我的代码中。 从示例中,它们在组件内传递动作类型和有效负载。 我是否必须将 myOfferActions 函数移回组件才能使用 Dispatch?
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);
提供行动
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);
}
};
提供减速器
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;
我认为使用 redux 挂钩时不需要connect
。
你只需要像这样调用 useDispatch : const dispatch = useDispatch();
并通过提供 object 识别操作来使用 function:
dispatch({ type: 'SOME_ACTION', payload: 'my payload'});
它也应该与redux-thunk
一起使用(我想这就是你正在使用的): dispatch(fetchMyOffers())
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.