我的 mapStateToProps 中的 state 出现 undefined

Question

I had an issue following other questions concerning this so here goes nothing.

So I am using redux thunk to 'post' to a database and hopefully display on the frontend view using fetch....but that's not where my issue is yet and just want you to understand where I will want to end up at some point. So my issue is I am getting a 'TypeError: state is undefined' on my mapStateToProps function and I thought I was setting this up right.

Below is the code snippet that shows up in my browser showing where the problem is.

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

.....I hope I don't lose anyone on this next part

So far....here is my RecipeContainer component where my mapStateToProp function is defined and connected.

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)

Here is my reducer showing where I put together the 'Add_Recipe' action type

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],
            }

}

And lastly(not sure how relevant this is).....here is my 'postRecipe' action defined in it's own file

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))

    }
    
    
}

I want to know basically how my state as initially mentioned in my mapStateToProp function is coming up undefined, and if I missed anything in the code I presented. Redux has been a little tough to grasp.

Answer 1

It should work if you change paylaod to payload. You've got undefined in state, since the payload is not sent with dispatch.

 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', payload: { name: resp.name, ingredients: resp.ingredients, chef_name: resp.chef_name, origin: resp.origin, catagoryId: resp.catagoryId } }) }).catch((error) => console.log.error(error)) } }