Redux-未从 mapStateToProps 获取状态答案

【问题标题】：Redux- Not getting state from mapStateToPropsRedux-未从 mapStateToProps 获取状态
【发布时间】：2018-11-19 08:52:30
【问题描述】：

我是 redux 的新手，我创建了一个代码，在访问 store 中状态的 connect 方法时，我收到错误，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，在减速器内部进行控制台时，我能够获得输出，但在 mycomponent 中我没有得到正确的输出。

提前致谢。

【问题讨论】：

您遇到了什么错误？你能分享错误细节/堆栈跟踪吗？
在安慰状态的时候我变成了这样
ƒ (action) { if (typeof action === 'function') { return action(dispatch, getState, extraArgument); } 返回下一个（动作）； }
你能创建一个工作示例吗？或共享最小代码来重现此问题？您可以使用codesandbox.io/s/new 创建一个工作示例...

标签： reactjs redux react-redux

【解决方案1】：

你的问题出在这一行：

export default connect(mapDispatchToProps,mapStateToProps)(BurgerBuilder)

您已经颠倒了您在connect 中传递的函数的顺序，这就是您的console.log 输出调度函数的原因。试试这样：

export default connect(mapStateToProps, mapDispatchToProps)(BurgerBuilder)

【讨论】：