React Redux初始提取问题

时间:2017-06-07 10:31:12

标签: javascript reactjs react-redux

这是我的减速机:

export default function reducer(state= [], action) {
  switch (action.type) {
    case types.ADD_DISH_FULFILLED:
      return [...state, Object.assign({}, action.data)];

    case types.FETCH_DISHES_FULFILLED:{
      return [...state, Object.assign({}, action.data.dishes)];

    }

    default:
      return state;
  }
};

继承我的行为:

    function requestDishes() {
        return {type: types.FETCH_DISHES_PENDING}
    };

    function receiveDishes(json) {
        return{
            type: types.FETCH_DISHES_FULFILLED,
            data: json
        }
    };

    function receiveDishesError(json) {
        return {
            type: types.FETCH_DISHES_ERROR,
            data: json
        }
    };

    export const fetchDishes = () => {
        return function(dispatch) {
            dispatch(requestDishes());
            return axios.get(restPath+'/dishes')


    .then(function(response) {
                dispatch(receiveDishes(response.data));
            })
            .catch(function(response){
                dispatch(receiveDishesError(response.data));
            })
    }
}


function requestDish() {
    return {type: types.ADD_DISH_PENDING}
};

function receiveDish(json) {
    return{
        type: types.ADD_DISH_FULFILLED,
        data: json
    }
};

function receiveDishError(json) {
    return {
        type: types.ADD_DISH_ERROR,
        data: json
    }
};
export const addDish = (dish) => {
    return function(dispatch) {
        dispatch(requestDish());
        return axios.post(restPath+'/dishes', dish)
            .then(function(response) {
                dispatch(receiveDish(response.data));
            })
            .catch(function(response){
                dispatch(receiveDishError(response.data));
            })
    }
};

当我调用addDish函数时,一切正常,它就像Api返回时一样附加到道具上{“”:“”,“”:“”,“”,“”}

然而......当我拿回所有的菜肴时,我回来时遇到了问题

[ "Dishes"{ Obj{}, Obj{} }]

在减速机中,我正在尝试:

return [...state, Object.assign({}, action.data.dishes)];

但这里出现了问题,道具现在是

"Dishes" [
  Object{
    Object, 
    Object
  }
] 

但我希望它是

"Dishes" [
   Object, 
   Object, 
   Object
] 

并没有嵌套到另一个级别。

这是我的容器=

DishContainer.propTypes = {
  dishes: PropTypes.array.isRequired,
  actions: PropTypes.object.isRequired
};

function mapStateToProps(state, props) {
  return {
    dishes: state.dishes
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(dishesActions, dispatch)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(DishContainer);

0 个答案:

没有答案