如何修复还原器以返回对象的属性值？
我有一个还原剂在我的反应本地应用程序，理想情况下，应该检查状态和返回，如果食谱已被喜爱与否。我尝试创建一个还原器，如果isFav对状态中的菜谱对象为true或false，则返回。如果未在状态中找到配方，则应返回false。
我撞到了砖墙，想弄清楚怎么写减速机。这就是我到目前为止所拥有的。
这是我的favids.js减速器
import { TOGGLE, IS_FAVOURITE } from '../actions'
export const favids = (state = [], action) => {
const { type, recipeid } = action
const newRecipe = {
recipeid,
is_fav: true,
}
switch (type) {
case TOGGLE: {
// console.log(`Toggle State = ${JSON.stringify(state)}`)
// console.log(`Toggle recipe id : ${recipeid}`)
return state.findIndex(recipe => recipe.recipeid === recipeid) === -1 ?
[...state, newRecipe] :
state.map(recipe =>
recipe.recipeid === recipeid ?
{ ...recipe, is_fav: !recipe.is_fav } : recipe
)
}
case IS_FAVOURITE: {
//console.log(`Is Favourite state =${JSON.stringify(state)}`)
return state.map(recipe =>
recipe.recipeid === recipeid ?
recipe.is_fav : state
)
}
default:
return state
}
}这是我的actions.js
export const TOGGLE = 'TOGGLE'
export const toggleFavId = id => ({
type: 'TOGGLE',
recipeid: id
})
export const IS_FAVOURITE = 'IS_FAVOURITE'
export const isFavourite = id => (
{
type: 'IS_FAVOURITE',
recipeid: id
}
)我试图修改is_favourite还原器，以返回一个true或false，这是保存在状态中的菜谱对象的is_fav属性的值。
在呈现组件时，我试图在可见组件的useEffect中调用它。
这是favicon.js文件
import React, {useState, useEffect} from 'react'
import { FontAwesome } from '@expo/vector-icons'
import { View, TouchableOpacity,StyleSheet, Text, Alert } from 'react-native'
const FavIcon = ({recipeid, onToggle, isFavourite, text}) => {
const [isFavNew, setFavNew] = useState(false)
const toggleFav = (recipeid) =>{
setFavNew(!isFavNew)
onToggle(recipeid)
}
useEffect(() => {
console.log("Entered useEffect")
console.log(`Recipeid = ${recipeid}`)
console.log(`Favicon UseEffect IS Favourtie Recipe id:> ${JSON.stringify(isFavourite(recipeid))}`)
**// if (recipeid > 0)
// setFavNew((isFavourite(recipeid))
// else {
// setFavNew(false)
// }**
},[])
// console.log(`Is Favourite in Favicon is = ${isFavourite(recipeid)}`)
return (
<View>
<TouchableOpacity style={styles.favItem} onPress={() => toggleFav(recipeid)}>
<FontAwesome name={isFavNew === true ? 'heart' : 'heart-o'} size={40} color='red' />
<Text> {text}</Text>
</TouchableOpacity>
</View>
)
}
export default FavIcon回答 1
Stack Overflow用户
发布于 2021-02-02 02:53:23
如果我正确理解你的问题，那是因为对Redux的误解。您正在寻找的是选择器，而不是由减速机处理的操作。
Redux不过是个大的，花哨的东西。还原器修改对象的属性。行动告诉减速器该怎么做。选择器将这些属性返回给您。
您可以用相同的名称移除减速机中的切换动作和外壳。然后创建一个选择器，如下所示：
const isRecipeFavorited = (recipeId) => (state) => {
const recipe = state.find(recipe => recipe.id === recipeId;
return recipe ? recipe.is_fav : false;
};选择器是将整个状态作为参数并返回子集的函数。当您使用useSelector时，Redux会为您传递整个状态。因此，像这样的函数是一个“选择器工厂”，您可以用菜谱ID调用它，它将返回该菜谱的选择器。你会像这样使用它：
import { useSelector } from 'react-redux';
import { isRecipeFavorited } from '{selectors path}';
...
const recipeIsFavorited = useSelector(isRecipeFavorited(recipeId));另外，如果您最终获得了大量的状态信息，您可以进行一些优化，这将有所帮助。最重要的是将菜谱存储在一个对象中，而不是一个数组中。我假设您从API中得到了一系列的菜谱。假设您可以依赖唯一的菜谱ID，则可以遍历数组并将每个数组存储在一个对象中：
const recipesState = {};
returnedRecipes.forEach(recipe => {
recipesState[recipe.id] = recipe;
};然后，当您在还原器中选择菜谱时，您不需要遍历整个列表就可以得到想要的菜谱，或者存储结果。您可以在O(1)时间内完成这些操作，因为您已经知道了菜谱ID。
那么减速机中的IS_FAVOURITE箱看起来可能是这样的：
case TOGGLE: {
const tempRecipes = { ...state };
const currentRecipe = tempRecipes[recipeId];
currentRecipe
? currentRecipe.is_fav = !currentRecipe.is_fav
: tempRecipes[recipeId] = newRecipe;
return tempRecipes;
}然后，您可以像下面这样设计我前面描述的选择器：
const isRecipeFavorited = (recipeId) => ({ recipe }) => recipe[recipeId]
? recipe[recipeId].is_fav
: false;https://stackoverflow.com/questions/66001825
复制相似问题
腾讯云开发者
