我尝试调用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) ;
我不知道出了什么问题,任何提示都很好,谢谢
https://stackoverflow.com/questions/51912325
复制相似问题