Redux - не получает состояние от mapStateToProps - PullRequest
Новая
       7

Redux - не получает состояние от mapStateToProps

0 голосов
/ 19 ноября 2018

Я новичок в редуксе. Я создал код и при доступе к методу подключения для состояния в хранилище я получаю сообщение об ошибке, и ниже указан undefined.code.

Действие: 

export const ADD_INGREDIENT = 'ADD_INGREDIENT';
export const REMOVE_INGREDIENT = 'REMOVE_INGREDIENT';

Редуктор: 

import * as actionTypes from './actions';

const initialState={
    ingredients: {
        salad:0,
        meat:0,
        cheese:0,
    },
    totalprice:40
}

const reducer = (state=initialState, action)=>{
    switch (action.type) {
        case actionTypes.ADD_INGREDIENT:
            return {
                ...state,
                ingredients:{
                    ...state.ingredients,
                    [action.ingredientName] : state.ingredients[action.ingredientName]+1
                },
            };
        case actionTypes.REMOVE_INGREDIENT:
        return {
            ...state,
            ingredients:{
                ...state.ingredients,
                [action.ingredientName] : state.ingredients[action.ingredientName]-1,
            },
        };
        default:
            return state;
    }
};
export default reducer;

мой компонент: 

import React, {Component} from 'react';
import Burger from "../../components/burger/burger";
import Aux from '../../hoc/aux';
import classes from './BurgerBuilder.css';
import BuildControls from '../../components/burger/BuildControls/BuildControls';
import Totalprice from '../../components/burger/TotalPrice/TotalPrice';
import * as actionTypes from '../../store/actions';
import { connect } from 'react-redux';
import {store} from '../../App';

const ingredientCost = {
    cheese:20,
    meat:30,
    salad:10,
};

class BurgerBuilder extends Component{
    constructor(props){
        super(props);
        this.state={
            initialValue: store.getState().ingredients,
            totalPrice:0,
        }
    }

    render(){
        const disabledInfo ={
            ...this.props.ings
        }
        if(this.props.ings){
        return(
            <Aux>
                <h1 className={classes.Header}>Burger</h1>
                <Burger ingredients={this.props.ings}/>
                <div>
                {this.state.totalPrice !== 0 ?
                (<Totalprice
                totalAmount={this.state.totalPrice}
                />):(<div></div>)}
                <BuildControls
                increaseIngredientCount={this.props.newIngredientAdd}
                decreaseIngredientCount={this.props.newIngredientRemove}
                /></div>
            </Aux>
        )
    }

else{
    return(
<Aux>
<h1 className={classes.Header}>Burger</h1>
                <Burger
                ingredients={this.state.initialValue}/>
                <div>
                {this.state.totalPrice !== 0 ?
                (<Totalprice
                totalAmount={this.state.totalPrice}
                />):(<div></div>)}
                <BuildControls
                increaseIngredientCount={this.props.newIngredientAdd}
                decreaseIngredientCount={this.props.newIngredientRemove}
                /></div>
</Aux>
    )
}
}
}

const mapStateToProps = state =>{
    return console.log(state);
}
const mapDispatchToProps = dispatch =>{
    return{
        newIngredientAdd: (ingName)=>dispatch({type:actionTypes.ADD_INGREDIENT,ingredientName:ingName}),
        newIngredientRemove: (ingName)=>dispatch({type:actionTypes.REMOVE_INGREDIENT,ingredientName:ingName})
    }
}

export default connect(mapDispatchToProps,mapStateToProps)(BurgerBuilder)

app.js 

import React, { Component } from 'react';
import {BrowserRouter} from 'react-router-dom';
import {Provider} from 'react-redux';
import BurgerBuilder from './containers/BurgerBuilder/BurgerBuilder';
import reducer from './store/reducer';
import {createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

export const store = createStore(reducer, applyMiddleware(thunk))
class App extends Component {
  render() {
    return (
      <Provider store={store}>
      <BrowserRouter>
        <BurgerBuilder/>
      </BrowserRouter>
      </Provider>
    );
  }
}

export default App;

это код, который у меня есть, и я обернул app.js провайдером, и, утешая внутри редуктора, я могу получить вывод, но пока в моем компоненте я не получаю правильный вывод.

Заранее спасибо.

1 Ответ

0 голосов
/ 19 ноября 2018

Ваша проблема в этой строке: 

export default connect(mapDispatchToProps,mapStateToProps)(BurgerBuilder)

Вы изменили порядок функций, которые вы передаете в connect, поэтому ваш console.log выводит функцию диспетчеризации.Попробуйте вот так: 

export default connect(mapStateToProps, mapDispatchToProps)(BurgerBuilder)
...