Question

我正在尝试确保我的组件加载数据并在屏幕上显示

我的组件中有以下代码

componentDidMount(){
    this.props.getRecipeList();
}

它基本上会在动作中为我提取数据。

在我的减速机中我有

case GET_RECIPE_LIST:
    return {
        ...state, RecipeList: action.RecipeList
    };

在我的容器中我有

const mapStateToProps = (state, ownProps) => ({
    RecipeList: state.RecipeList
})

const mapDispatchToProps = (dispatch, ownProps) => ({
    getRecipeList: () => dispatch(getRecipeList())
})

const RecipeListContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(RecipeList)

我的减速机

import { 
    SELECT_RECIPE,
    ADD_RECIPE_INGREDIENTS_TO_GROCERYLIST,
    GET_RECIPE_LIST
 } from '../Actions/ActionTypes';

const recipeReducer = (state = {Recipe: null, RecipeList: []}, action) => {
    switch (action.type) {
        case SELECT_RECIPE:
            return {
                ...state, Recipe: action.Recipe
            };
        case ADD_RECIPE_INGREDIENTS_TO_GROCERYLIST: 
            return {...state};
        case GET_RECIPE_LIST:
            return {
                ...state, RecipeList: action.RecipeList
            };
        default:
            return state;
    }
}

export default recipeReducer;

我的行动

export const selectRecipe = id => {
  const settings = appConfig;
  return (dispatch) => {
     fetch(`${settings.RestServerLocation}/Api/recipe/${id}`)
      .then(result => result.json())
      .then((data) => {
        /* return {
          type: SELECT_RECIPE,
          Recipe: data
        } */
        dispatch( {
          type: SELECT_RECIPE,
          Recipe: data
        })
      }); 
  }
}

当我发送getRecipeList我的财产RecipeList没有被加载时怎么回事？顺便说一句，如果我在减速器中放置断点，我可以看到数据在那里

Redux不更新我的属性，因此我的组件没有数据

0 个答案: