![](/img/trans.png)
[英]Should I use useselector/useDispatch instead of mapStateToProps
[英]What should I use instead of useSelector or mapStateToProps?
我应该使用什么来代替useSelector
或mapStateToProps
? 那些运行多次并将所有值更改为最后一个。
我有一个电子商务应用程序, ProductDetails
组件包含产品评论,我将这些评论映射到ProductReview
组件以获取从用户 ID 获取的用户信息。
产品详情.js
import React, { useEffect } from "react";
import ProductReview from "../components/ProductReview";
import { useSelector, useDispatch } from 'react-redux';
import { getProductDetailsById } from "../Store/actions/productActions";
export default function ProductDetails(props) {
const dispatch = useDispatch()
const product = useSelector((state) => state.product)
useEffect(() => {
const { id } = props.match.params;
const payload = {
params: {
id,
},
};
dispatch(getProductDetailsById(payload));
},[dispatch, props.match.params]);
return (
<div>
{product.productDetails.reviews &&
product.productDetails.reviews.map((item , index) =>
(
<li key={item.userId}>
<ProductReview key={item.userId} userId={item.userId}
review={item.review}/>
</li> )
)}
)}
</div>
);
}
ProductReview.js
import React,{ useState, useEffect } from 'react';
import { getUSerById } from '../Store/actions/userAction';
import {useDispatch , useSelector} from 'react-redux';
export default function ProductReview(props) {
const dispatch = useDispatch()
const user = useSelector(state => state.user)
const {userId} = props;
useEffect(() => {
const payload = {
params : {
userId
}
}
dispatch(getUSerById(payload))
},[userId]);
return (
<div>
{user && user.user.firstName} : {props.review}
</div>
)
}
这部分代码运行多次并将所有用户信息值(用户名)更改为最后一个。 **所有产品评论firstName
s 更改为最后一个 ** 所有相同的名称
const user = useSelector(state => state.user)
有没有办法摆脱这个?? 它当前在ProductReview
组件中使用 Axios 和useState()
,但我想使用 redux。
userReducer.js
import { userConstants } from "../actions/Types";
const initState = {
user: {},
loading: false,
error: null
};
export default (state = initState, action) => {
console.log(action.payload)
switch(action.type){
case userConstants.GET_USER_BY_ID_SUCCESS:
return state = {
...state,
user : action.payload.user,
loading: false,
error: null
}
case userConstants.GET_USER_BY_ID_FAILURE:
return state = {
state,
error: action.payload.error
}
default:
return state
}
}
根据我在评论中的理解,您需要以某种方式将所有用户存储在您的 redux 存储中。 例如,您可以执行以下操作:
使用以下命令更改initState
:
const initState = { users: {}, loading: false, error: null };
更改GET_USER_BY_ID_SUCCESS
减速器(请注意我使用的是user.id
,但也许您的 id 存储在其他一些属性中):
case userConstants.GET_USER_BY_ID_SUCCESS: return state = { ...state, users: { ...state.users, [action.payload.user.id]: action.payload.user }, loading: false, error: null }
将 useSelector 更改为:
const users = useSelector(state => state.users)
添加:
const user = users[props.userId]
通过这种方式,您应该拥有正确的用户。 如果我错过了什么,请告诉我。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.