如何修复我的减速器以返回对象的属性值？

如何解决如何修复我的减速器以返回对象的属性值？

我的 React Native 应用程序中有一个 reducer，理想情况下，它应该检查状态并返回配方是否被收藏。我试图创建一个减速器，如果 isFav 为状态中的配方对象为真或假，则返回。如果在 state 中找不到配方，它应该返回 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 reducer 以返回 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

解决方法

如果我正确理解您的问题，那是由于对 Redux 的误解。您正在寻找一个选择器，而不是一个由减速器处理的动作。

Redux 只不过是一个大而奇特的对象。 Reducers 修改对象的属性。动作告诉减速器如何做到这一点。选择器将这些属性返回给您。

您可以删除 TOGGLE 操作和减速器中同名的 case。然后，您将创建一个如下所示的选择器：

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，您可以遍历数组并将每个 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;