[英]this.props.dispatch is not a function in react with redux
我用redux action調用api,所以我創建了reducers,action和store。 但是當我從視圖部分調用redux動作時。 我收到以下錯誤。
this.props.dispatch不是函數
以下是我的減速器,動作和查看零件(React)的代碼,可以幫助您理解代碼。
注意:當我console.log(this.props)時,我沒有得到dispatch()函數。
actions.js
import {
FETCH_WORKS_SUCCESS,
FETCH_WORKS_FAILURE
} from './actionTypes'
export function fetchFeaturedWork(){
return dispatch => {
return fetch("https://api.com/api/wp-json/customapi/all_posts?category=work&featured=true")
.then(res => res.json())
.then(json => {
dispatch(fetchFeaturedWorkSuccess(json.works));
return json.works;
})
};
}
export const fetchFeaturedWorkSuccess = works => ({
type: FETCH_WORKS_SUCCESS,
payload: { works }
});
reducer.js
import {
OPEN_MENU,
CLOSE_MENU,
SET_DEVICE_TYPE,
FETCH_WORKS_SUCCESS,
FETCH_WORKS_FAILURE
} from '../actions/actionTypes'
const initialState = {
isMenuOpen: null,
isMobile: false,
error:null,
works:[]
}
const reducer = (state = initialState, action) => {
switch (action.type) {
case OPEN_MENU:
return {...state, isMenuOpen: true}
case CLOSE_MENU:
return {...state, isMenuOpen: false}
case SET_DEVICE_TYPE:
return {...state, isMobile: action.isMobile}
case FETCH_WORKS_SUCCESS:
return {...state,works:action.payload.works}
case FETCH_WORKS_FAILURE:
return {...state,error:action.payload.error,works:[]}
default:
return state
}
}
export default reducer;
store.js
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers/reducer';
import thunk from "redux-thunk";
let store = createStore(rootReducer,applyMiddleware(thunk))
export default store
App.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import Slider from "react-slick";
import Footer from '../footer'
import './index.css';
import { connect } from 'react-redux'
import { openMenu,fetchFeaturedWork } from '../../actions/actionCreators'
import Header from '../header'
import arrowRight from '../../images/arrow-right.svg'
import arrowLeft from '../../images/arrow-left.svg'
const mapStateToProps = (state) => ({
isMobile: state && state.isMobile
})
const mapDispatchToProps = (dispatch, ownProps) => ({
openMenu: (isMobile) => dispatch(openMenu(ownProps.isMobile))
})
class Work extends Component {
getImgSlider = (slider) => {
this.imgSlider = slider
}
getTextSlider = (slider) => {
this.textSlider = slider
}
componentDidMount(){
this.props.dispatch(fetchFeaturedWork());
}
render() {
let className = 'idz_work'
if (this.props.isMobile) {
className = 'idle'
}
return (
<div>
{
this.props.isMobile ?
null
:
<Link to='/home'>
<div className='idz_sidebar' style={{ left: 0 }}>
<div>
<label>FEATURED</label>
</div>
</div>
</Link>
}
<div className={className}>
{!this.props.isMobile &&
<Header logo="dark"/>
}
<div className="content">
<label className="light-gray" style={this.props.isMobile ? { fontSize: '1.3rem' } : { fontSize: '2rem' }}>Featured Works</label>
<hr style={this.props.isMobile ? { marginBottom: '0.5rem', marginTop: '0.5rem' } : {}} />
<hr style={this.props.isMobile ? { marginBottom: '0.5rem', marginTop: '0.5rem' } : {}} />
<label className="light-gray" style={this.props.isMobile ? { fontSize: '1.3rem' } : { fontSize: '2rem' }}>All Works</label>
<hr style={this.props.isMobile ? { marginBottom: '0.5rem', marginTop: '0.5rem' } : {}} />
<hr />
</div>
{this.props.isMobile ? null : <Footer />}
</div>
</div>
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Work);
使用mapDispatchToProps時,props中不再可用調度。 因此,可以擺脫mapDispatchToProps並使用this.props.dispatch。 或將所有調度功能移至mapDispatchToProps。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.