Question

好的，所以，我正在开发一个简单的食谱收集应用程序，其中有CuisineReducer.js和RecipeReducer.js。

在我的管理仪表板上，管理员用户可以创建，删除和编辑任何美食组，还可以为任何美食组创建，删除和编辑食谱。当用户单击任何美食组时，它将使用美食ID在“食谱”面板中呈现所有食谱。用户还可以通过在“食谱”或“烹饪”组上按“ x”来删除。我需要解决的冲突是删除配方时，也应该从ui中删除它，而无需刷新。我不知道如何实现这一目标。这是我的代码。

CuisineReducer.js

import { GET_CUISINES, GET_CUISINE_BY_ID, GET_CUISINE_BY_CATEGORY} from "../actions/types.js"; 
const initialState = { 
      cuisines: [],
      cuisine:{}
};

export default function (state = initialState, action) { 
    switch(action.type) {
        case GET_CUISINES:
             return {
                     ...state,  
                     cuisines:action.payload
                    }; 
        case GET_CUISINE_BY_CATEGORY:
             return {
                     ...state,  
                     cuisines:action.payload
                    }; 
        case GET_CUISINE_BY_ID:
             return {
                     ...state,  
                     cuisine:action.payload
                    }; 
        default:
             return state; 
}

CuisineActions.js

import {  GET_CUISINES, GET_CUISINE_BY_ID} from "./types.js"; 
import axios from 'axios'; 

export const getCuisines = () =>async dispatch => { ... }

export const getCuisineByCategory = (id) =>async dispatch => { 
     const res = await axios.get(`/api/cuisine/${id})
     dispatch({
           type:GET_CUISINES_BY_CATEGORY,
           payload: res.data
     }); 

export const getCuisineById = (id) =>async dispatch => { 
     const res = await axios.get(`/api/cuisine/${id})
     dispatch({
           type:GET_CUISINE_BY_ID,
           payload: res.data
     }); 
}

recipeReducer.js

import { GET_RECIPES, GET_RECIPE_BY_ID, DELETE_RECIPE} from "../actions/types.js"; 

const initialState = { 
      recipes: [],
      recipe:{}
};

export default function (state = initialState, action) { 
    switch(action.type) {
        case GET_RECIPES:
             return {
                     ...state,  
                     recipes:action.payload
                    }; 
        case GET_RECIPE_BY_ID:
             return {
                     ...state,  
                     recipe:action.payload
                    }; 
       case DELETE_RECIPE:
             return {
                     ...state,  
                     recipes:state.recipes.filter(asset => asset.id != action.payload)
                    }; 
        default:
             return state; 
}

RecipeActions.js

import { DELETE_RECIPE} from "./types.js"; 
import axios from 'axios'; 

export const getRecipes = () =>async dispatch => { ... }

export const deleteRecipe = (id) =>async dispatch => { 
     await axios.delete(`/api/recipe/${id})
     dispatch({
           type:GET_RECIPE_BY_ID,
           payload: id
     }); 
}

Admin.js

import React, {Component} from react; 
import {connect} from 'react-redux'; 
import { getCuisineById, getCuisinesByCategory} from '../../actions/cuisineAction.js';
import AdminCuisineList from '../AdminCuisineList.js;
import AdminRecipeList from '../AdminRecipeList.js"; 

Class Admin extends Component {

   componentWillUnmount = () => {
       this.props.clearCuisine(); 
   }

   revealList = category => {
       this.props.getCuisinesByCategory(caegory); 
   }

   revealRecipeList = id => {
     this.props.getCuisineById(id); 
   }

 render () {
  const {cuisines} = this.props; 
  return(
   <div>
    <div>      
     <ul> 
       <li onClick={() => revealList('meal')}>  Meal </li>
       <li onClick={() => revealList('meal')}>   Deserts </li>
       <li onClick={() => revealList('meal')}>   Drinks  </li>
     </ul>    
    </div> 
    { cuisines && 
         cuisines.map(cuisine => ( 
            <AdminCuisineList  label={cuisine.label} recipeHandler={() => this.revealRecipeList(cuisine.id)}} /> 
    ))} 

   { cuisine && cuisine.recipes
         cuisine.recipes.map(recipe => ( 
            <AdminRecipeList  label=recipe.label} cuisineId={recipe.cuisine[0] /> 
    ))} 

  ); 

 }

}

这是我正在使用的通话的json数据： getCuisinesByCategory（）调用输出：

[ 
  "label": "Indian",
  "category": "Meal", 
  "recipes": [ 
      { id: "123", "label": "Chicken Biryani"},
      { id: "124", "label": "Chicken Korma"}, 
      { id:  "125", "label: "Nihari"}, 
      { id: "1244", "label": "Pulao"}, 
      { id: "12321", "label": Pakore"},
      { id: "1232", "label": "Bun Kubab"}     
    ] 
]

Answer 1

您似乎在处理减速器中的删除食谱-删除食谱时使用了错误的操作。您需要使用DELETE_RECIPE操作类型。您正在使用GET_RECIPE_BY_ID

export const deleteRecipe = (id) =>async dispatch => { 
 await axios.delete(`/api/recipe/${id})
 dispatch({
       type:DELETE_RECIPE,
       payload: id
 }); 
}

当状态在其他异化器中更改时，重新发送组件

1 个答案: