Question

当我使用webpack-dev-server在redux中启动应用程序时，我从商店获得了道具。但是，当我将带有启动脚本的启动应用程序使用时，我无法存储道具。而且无法从商店购买。

https://github.com/Vladislav747/React_cookbook/tree/development_v-2

例如组件配方

从'react'导入React，{组件};从导入食谱   '。/食谱';从“ react-redux”导入{connect}；导入{PropTypes   }来自“ prop-types”；

从'../redux/actions'导入{fetchDataIngredient};

类食谱扩展了组件{
componentDidMount() {
    const { dispatch } = this.props;
    dispatch(fetchDataIngredient());
}

render() {

    // Empty and Loading States
    let view;
    if (this.props.dataIngredient.length <= 0 && this.props.isLoading) {
        view = <p>Loading</p>;
    } else {
        view = this.props.dataIngredient
            .map((item, i) => {
                return (
                    <Recipe key={item.idRecipe} id={item._id.$oid} title={item.titleRecipe} ingredients={item.ingredients} />
                );
            });;
    };

    return (<div className="recipes">{view}</div>);

}
}

Recipes.propTypes = {
dataIngredient: PropTypes.array,
isLoading: PropTypes.bool }
const mapStateToProps =（状态）=> {       返回{           dataIngredient：state.dataIngredient，           isLoading：state.isLoading       }; }

导出默认的connect（mapStateToProps）（配方）;

我的减速器

将*作为'../action-types'中的类型导入；

//Изначальный状态导出const initialState = {

isFormOpen: false,
isLoading: false,
dataIngredient: [],
isMessageOpen: false,
errors:{},
isSubmitting:false,
isSuccess:false,
typeSuccess:''

};

//Еслиесть状态тоиспользуемегоиначе-изначальный状态功能 reducer（state = initialState，action）{

console.log(state);
console.log(action.type);

switch (action.type) {

    case types.DATA_ERROR:
        return{...state, isSuccess:false, errors:action.payload, isMessageOpen:true}

    case types.DATA_SUCCESS:
        return{...state, isSuccess:action.payload.isSuccess, typeSuccess:action.payload.typeSuccess, isMessageOpen:true}

    case types.CHANGE_FORM:
        return { ...state, isFormOpen: action.payload };

    case types.CHANGE_ERROR_MESSAGE:
        return { ...state, isMessageOpen: action.payload };

    case types.FETCH_DATA:
        return { ...state, isLoading: true }

    case types.FETCH_ERROR:

        return { ...state, errors: action.payload }

    case types.GET_DATA_INGREDIENT:


        return Object.assign({}, state, {
            isLoading: false,
            dataIngredient: action.payload
        });

    default:
        return state;
}

}

我的商店

从'redux'导入{createStore，applyMiddleware};进口   thunk来自'redux-thunk'的中间件;导入减速器{initialState}   来自“ ../reducers/index”；从“ redux-promise”导入承诺

const store = createStore（         减速器，         initialState，         applyMiddleware（             thunkMiddleware，             诺言，         ））;

导出默认存储；

我的动作

将*作为'./action-types'中的类型导入；从导入{configs}   '../dbConfig/config';从'axios'导入axios;导入{v4作为uuid}   来自“ uuid”；

导出函数changeForm（payload）{
return { type: types.CHANGE_FORM, payload:!payload } }
导出函数changeMessage（payload）{
return { type: types.CHANGE_ERROR_MESSAGE, payload:!payload } }
export const addDataIngredient =（数据）=>调度=> {
const id = uuid();
return axios.post(configs.URI,
{"idRecipe": id,
"titleRecipe": data.titleRecipe,
"ingredients": data.ingredients})
  .then(() =>{ 

    dispatch(dataSuccess("addDataSuccess"));
    dispatch(fetchDataIngredient());
  })
     .catch(err=> 
    dispatch(dataError(err, "addDataError"))) }
const dataSuccess =（类型）=> {       返回{           类型：types.DATA_SUCCESS，           有效负载：{typeSuccess：type，isSuccess：true}       }

const dataError =（err，type）=> {       返回{           类型：types.DATA_ERROR，           有效负载：{errMessage：err.message，类型：类型}       }

export const deleteDataIngredient =（id）=>调度=> {
return axios.delete(configs.URI_FOR_DELETE+id+'?apiKey='+configs.MYAPIKEY)
      .then(() =>{ 

        dispatch(dataSuccess("deleteDataSuccess"))
        dispatch(fetchDataIngredient());
      })
         .catch(err=> 
        dispatch(dataError(err, "deleteDataError"))
        ) }
const getDataIngredient =（json）=> {       返回{           类型：types。GET_DATA_INGREDIENT，           有效负载：json       }

const fetchData =（）=> {       返回{           类型：types.FETCH_DATA       }

export const fetchDataIngredient =（）=> dispatch => {
    dispatch(fetchData());

    return axios.get(configs.URI)
      .then((response) =>{ 

        dispatch(getDataIngredient(response.data));
      })
      .catch(err=> dispatch(
            dataError(err, "fetchDataError")))
}

我的应用程序无法获得道具的状态

0 个答案: