javascript - 如何使用 react redux 配置 mapDispatchToProps？

Question

下面是我的容器代码:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchMovies } from './actions';

export class Container extends Component {
  componentDidMount() {
    this.props.fetchMovies();
  }
}

const mapStateToProps = state => {
  return {
    movies: state.movies,
  };
};

function mapDispatchToProps(dispatch) {
  return {
    fetchMovies: bindActionCreators({fetchMovies}, dispatch),
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Container);

Action :

export const fetchMovies = () => dispatch => {
  console.log('fetchMovies called');
  // const movieResponse = fetchAPI(apiUrl);
  // console.log('movieResponse => ', JSON.stringify(movieResponse));
  dispatch({ type: actionTypes.FETCH_MOVIES, payload: [] });
};

商店:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import rootReducer from '../rootReducer';

const middlewares = [thunk];

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(...middlewares))
);

export default store;

依赖版本:

"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-bootstrap": "^1.0.0-beta.11",
"react-dom": "^16.8.6",
"react-flexbox-grid": "^2.1.2",
"react-redux": "^7.1.0",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1",
"redux": "^4.0.4",
"redux-actions": "^2.6.5",
"redux-promise-middleware": "^6.1.1",
"redux-thunk": "^2.3.0",

Getting error:

TypeError: this.props.fetchMovies is not a function

我正在使用 16.8 的最新 React 版本。是这个原因吗？还是我在配置中遗漏了什么？

Answer 1

🎈 要简单得多。

我不知道您为什么要使用“thunk”，我建议您改用“saga”。我不喜欢向操作添加一些逻辑(获取)的想法，但这里的任何方式都是您的解决方案。

容器:

import React, { Component } from "react";
import connect from "./connect";

export class MovieList extends Component {
  componentDidMount() {
    this.props.fetchMovies();
  }

  render() {
    const { isFetching, movies } = this.props;
    const toLi = (movie, key) => <li key={key}>{movie.title}</li>;

    return isFetching
      ? <span>Data is loading</span>
      : <ul>{movies.map(toLi)}</ul>
  }
}

export default connect(MovieList); // pay attention to this

将容器与 store 绑定(bind)，这样会让你的容器更像组件:

import { connect } from "react-redux";
import { fetchMovies } from "../actions";

const props = state => ({
  movies: state.movies,
  isFetching: state.isFetching
});

const actions = {
  fetchMovies
};

export default connect(
  props,
  actions
);

Action 文件:

export const FETCH_MOVIES = `MOVIE/FETCH_MOVIES`;
export const FETCHED_MOVIES = `MOVIE/FETCHED_MOVIES`;
export const FETCH_ERROR = `MOVIE/FETCH_ERROR`;

export const receivedMovies = movies => ({
  type: FETCHED_MOVIES,
  movies
});

export const onError = error => ({
  type: FETCH_ERROR,
  error
});

export const fetchMovies = () => dispatch => {
  dispatch({type: FETCH_MOVIES})

  return fetch(API_URL)
    .then(res => res.json())
    .then(data => dispatch(receivedMovies(data)))
    .catch(err => dispatch(onError(err)));
}  

🧐 完整的工作演示在这里:https://codesandbox.io/s/7h56r