Question

我是Redux的新手，我创建了代码，并在访问存储状态中的状态的连接方法时，遇到错误，并且未定义。代码如下。

动作：

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，当在reducer内进行合并时，我能够获得输出，但是在mycomponent中却没有获得正确的输出。

谢谢。

Answer 1

您的问题在这一行：

export default connect(mapDispatchToProps,mapStateToProps)(BurgerBuilder)

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

export default connect(mapStateToProps, mapDispatchToProps)(BurgerBuilder)

Redux-无法从mapStateToProps获取状态

1 个答案: