Блог

У меня возникла проблема после других вопросов, касающихся этого, так что здесь ничего не происходит.

Итак, я использую redux thunk для «публикации» в базе данных и, надеюсь, отображения во внешнем интерфейсе с помощью fetch …. но это еще не то, в чем моя проблема, и я просто хочу, чтобы вы поняли, где я захочу оказаться в какой-то момент. Итак, моя проблема в том, что я получаю сообщение «TypeError: состояние не определено» в моей функции mapStateToProps, и я думал, что все настроил правильно.

Ниже приведен фрагмент кода, который отображается в моем браузере и показывает, в чем проблема.

 0 | const mapStateToProps = state =>{
  31 |     return{
> 32 |         recipes: state.recipes,
  33 |     }
  34 | }
  35 | 
 

…..Я надеюсь, что я никого не потеряю в этой следующей части

Пока что …. вот мой компонент RecipeContainer, в котором определена и подключена моя функция mapStateToProp.

 import React, { Component } from 'react'
import RecipeList from '../components/RecipeList'
import RecipeInput from '../components/RecipeInput'
import { connect } from 'react-redux'
import { postRecipes } from '../actions/fetchRecipes.js'

class RecipeContainer extends Component{
    constructor(props){
        super(props)
    }


    componentDidMount(){
        this.props.postRecipes()
    }

    render(){
        return (
            <div>
               <RecipeInput addRecipe={this.props.addRecipe}/> 
               <RecipeList recipes={this.props.recipes} deleteRecipe={this.props.deleteRecipe}/>
            </div>
        )
    }

}



const mapStateToProps = state =>{
    return{
        recipes: state.recipes,
    }
}


const mapDispatchToProps= dispatch =>{
    return{
    addRecipe: () => dispatch(postRecipes()),
    deleteRecipe: id => dispatch({type: 'Delete_Recipe', id})
    }
}


export default connect(mapStateToProps,mapDispatchToProps)(RecipeContainer)
 

Вот мой редуктор, показывающий, где я собрал тип действия ‘Add_Recipe’

 import cuid from 'cuid';
export const cuidFn = cuid

export default function manageRecipes(state={
    recipes:[],
    catagories:[],
}, action){


    switch(action.type){
        case 'Add_Recipe':
            const recipe = {
                name: action.name,
                ingredients: action.ingredients,
                chef_name: action.chef_name,
                origin: action.origin,
                catagoryId: action.catagoryId,
                catagories: action.catagories,
                id: cuidFn()
            }

            return{
                ...state,
                recipes: [...state.recipes, recipe],
            }

}
 

И, наконец (не уверен, насколько это актуально) ….. вот мое действие ‘postRecipe’, определенное в его собственном файле

 export function postRecipes(){
    const BASE_URL = `http://localhost:10524`
    const RECIPES_URL =`${BASE_URL}/recipes`
    const config = {
        method: "POST",
        body:JSON.stringify(recipe),
        headers: {
        "Accept": "application/json",
        "Content-type": "application/json"
     }
    }
    return(dispatch)=>{
    
    fetch(RECIPES_URL,config)
    .then(response => 
    response.json())
    .then(resp => {
        dispatch({
            type: 'Add_Recipe',
            paylaod:{
                name: resp.name,
                ingredients: resp.ingredients,
                chef_name: resp.chef_name,
                origin: resp.origin,
                catagoryId: resp.catagoryId 
            }
        })
    })
      .catch((error) => console.log.error(error))

    }
    
    
}

 

Я хочу знать, в основном, как мое состояние, изначально упомянутое в моей функции mapStateToProp, становится неопределенным, и не пропустил ли я что-нибудь в представленном мной коде. Redux было немного сложно понять.