问Redux -我的缩减程序不会被我的操作调用

EN

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

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

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>
          )
      })
  )}

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

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

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;
    }
}

export const DISH_ID= "DISH_ID";

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

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

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

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

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

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) ;