Question

我正在尝试调用Redux动作，但失败。采取其他措施是没有任何问题的。所以我想知道出了什么问题。

有趣的是我坏掉的redux函数返回：

ƒ displayDishAction(id) {
  return {
    type: __WEBPACK_IMPORTED_MODULE_0__actionTypes__["b" /* DISH_ID */],
    id: id
  };
}

在工作功能上，它返回：

ƒ () {
    return dispatch(actionCreator.apply(this, arguments));
  }

这是我的reactComponent.js：

class Appetizers extends Component {

   /* props: 
        - bakground_url 
        - recipe_descrption
        - title
  */

  onClick= (id) => {  
    console.log("dish id: ", this.props.displayDish) 
    this.props.displayDish(id)
  }

  renderRecipes(){      
      return (           
      this.props.data.recipes.map(({id, picture, description, title, price}, index) => { 
          return ( 

            <div className={style.wrapper} onClick={() => this.onClick(id)}> 
              <DishBox 
              key={id}
              className={style.box_dish}
              title={title}
              description={description}
              picture={picture}
              price={price}
              id={id} 

              />
            </div>
          )
      })
  )}

我的actions.js：

import { 
    DISH_ID
} from "../actionTypes"; 

export const displayDishAction= (id) => ({
        type: DISH_ID,
        id
})

我的reducer.js：

import {
    DISH_ID
} from "../actionTypes"; 


var initialState ={id:""};

export const displayDishReducer= (state= initialState, action) => { 

    var id= action.id 

    console.log("DISPLAYDISHREDUCER REACHED !!!")
    switch(action.type){ 
        case DISH_ID : 
                var newState = Object.assign({}, state, id);
                return  newState;           
        default: 
            return state;
    }
}

我的actionType.js：

export const DISH_ID= "DISH_ID";

我的container.js：

import {connect} from 'react-redux';
{import components ...}

const mapDispatchToProps = (dispatch) =>({
    displayDish :displayDishAction
})

const appetizersContainer = connect（null，mapDispatchToProps）（开胃菜）导出默认的appetizersContainer

const myContainer = connect(null, mapDispatchToProps)(Appetizers)
export default myContainer

这是我的appReducer.js：

import { combineReducers } from "redux"; 
import {displayDishReducer} from "./handleDisplayer"; 

// only one reducer active 
const appReducer = combineReducers({ 
    displayDishReducer
})
export default appReducer

这里是我的store / index.js：

import {createStore, compose} from 'redux'


import appReducer from './reducers';
import middleware from './middleware'
// import {DevTools} from "../container/DevTools.jsx" ;

const enhancer = compose(
  middleware,
 // DevTools.instrument()
)


 export default (initialState) => {
  const store = createStore(appReducer, initialState, enhancer) ;

我不知道出了什么问题，任何提示都很好，谢谢

Answer 1

您定义的mapDispatchToProps函数错误。如果您想使用长版本，我的意思是与dispatch一起使用，那么您应该像这样使用它：

const mapDispatchToProps = dispatch => ({
    displayDish: id => dispatch( displayDishAction( id ) ),
})

但是，这种速记方式适用于您的情况：

const mapDispatchToProps = {
    displayDish: displayDishAction,
}

即使没有定义mapDispatchToProps，您也可以像这样使用connect：

const myContainer = connect(null, {displayDish: displayDishAction} )(Appetizers)

Redux-我的操作未调用我的减速器

1 个答案: