this.props.dispatch 不是与 redux 反应的函数

Question

我用 redux action 调用 api，所以我创建了 reducer、action 和 store。但是当我从视图部分调用 redux 操作时。我收到以下错误。

this.props.dispatch 不是函数

下面是我的reducer、actions和view部分（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);

Answer 1

当你使用 mapDispatchToProps 时，dispatch 在 props 中不再可用。所以，要么摆脱 mapDispatchToProps 并使用 this.props.dispatch。或者将所有调度函数移动到 mapDispatchToProps。