1

我的 react native 应用程序中有一个减速器，理想情况下它应该检查状态并返回是否喜欢配方。如果 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
4

1 回答 1

1

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

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

您可以删除 TOGGLE 操作和减速器中具有相同名称的大小写。然后您将创建一个如下所示的选择器：

const isRecipeFavorited = (recipeId) => (state) => {
    const recipe = state.find(recipe => recipe.id === recipeId;
    return recipe ? recipe.is_fav : false;
};

选择器是一个函数，它将你的整个状态作为参数并返回一个子集。Redux 在您使用时为您传递整个状态useSelector。所以像这样的函数是一个“选择器工厂”，您可以在其中使用配方 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;
于 2021-02-02T02:53:23.947 回答