javascript - this.props.dispatch 不是与 redux 反应的函数
问题描述
我用redux action调用api,所以我创建了reducers、action和store。但是当我从视图部分调用 redux 操作时。我收到以下错误。
this.props.dispatch 不是函数
下面是我的 reducer、actions 和 view part(React) 代码,可以帮助你理解代码。
注意:当我使用 console.log(this.props) 时,我没有得到 dispatch() 函数。
动作.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 }
});
减速器.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
应用程序.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 时,dispatch 在 props 中不再可用。所以,要么摆脱 mapDispatchToProps 并使用 this.props.dispatch。或者将所有调度函数移动到 mapDispatchToProps。
推荐阅读
- pagespeed - 页面速度插件混乱
- webrtc - 为什么 WebRTC 需要两个浏览器来生成连接信息?
- javascript - Three.js:如何将“diffuseMap”和“roughnessMap”改为“cubeMap”?
- nlp - Seq2Seq 模型是否仅用于时间序列?
- java - 将正数放在负数之前
- excel - 从四列中找到最小值并将其与不同列中的范围进行比较?
- algorithm - 什么决定了 B 树中的最小度数?
- sql - Postgresql 在语句中引用变量
- ios - Obj-c - 如果 tableview 部分为空,应用程序崩溃?
- mysql - Mariadb中止连接错误,没有用户名