如何将我的 reducer 修复为 return 属性的 object 值？

Question

我的 React 本机应用程序中有一个 reducer，理想情况下应该检查状态和 return 食谱是否已被收藏。如果 isFav 对于该州的食谱 object 是真还是假，我已经尝试创建一个到 return 的减速器。如果在状态下找不到食谱，它应该 return false。

我在尝试弄清楚如何编写 reducer 时遇到了困难。这是我目前所拥有的。

这是我的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 修改为 return true 或 false，即配方 is_fav 属性的值 object保存下来的状态。

我试图在渲染组件时在可见组件的 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

Answer 1

如果我没有正确理解你的问题，那是因为对 Redux 的误解。您正在寻找一个选择器，而不是一个由 reducer 处理的动作。

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

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

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

选择器是一个函数，它将您的整个状态作为参数，return是一个子集。当你使用 useSelector 时，Redux 会为你传递整个状态。所以像这样的函数是一个“选择器工厂”，您可以在其中使用配方 ID 调用它，它会 return 该配方的选择器。你会像这样使用它：

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;
};

然后，当您在 reducer 中选择 recipe 时，您不必遍历整个列表来获得您想要的那个，也不必存储结果。您可以在 O(1) 时间内完成这些操作，因为您已经知道配方 ID。

然后你的 IS_FAVOURITE 你的 reducer 中的 case 可能看起来像：

        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;

如何将我的 reducer 修复为 return 属性的 object 值？

How do I fix my reducer to return the property value of an object?

reactjs

react-native

redux

redux-reducers

如何将我的 reducer 修复为 return 属性 的 object 值？

How do I fix my reducer to return the property value of an object?

reactjs

react-native

redux

redux-reducers

如何将我的 reducer 修复为 return 属性的 object 值？