Почему мое действие не срабатывает в редукторе?

Question

Кто-нибудь знает, почему при нажатии кнопки ничего не происходит?

Я пытаюсь получить movielist с сервера при нажатии кнопки, но он даже не показывает, что действие работает так, как я ожидал быть.

мой индекс реакции js

import React from 'react';
import { connect } from 'react-redux';
import { getMovies } from '../../actions/movieActions';

const Home = ({ movie }) => {
  const handleClick = () => {
    getMovies();
  };

  return (
    <div>
      <button onClick={() => handleClick()}>Get Movies</button>
    </div>
  );
};

const mapStateToProps = state => ({
  movie: state.movie.movies
});

export default connect(mapStateToProps, { getMovies })(Home);

мой rootReducer

import { combineReducers } from 'redux';
import movieReducer from './movieReducer';

export default combineReducers({
  movie: movieReducer
  // log is what we are calling our state
});

мой mov ie редуктор

import { GET_MOVIES } from '../actions/types';

const initialState = {
  movies: null
};

export default (state = initialState, action) => {
  switch (action.type) {
    case GET_MOVIES:
      return {
        ...state,
        movies: action.payload
      };
    default:
      return state;
  }
};

мой MOV ie действия

import { GET_MOVIES } from './types';

// get movies from server
export const getMovies = () => async dispatch => {
  try {
    const res = await fetch('http://localhost:5000/api/movies');
    const data = await res.json();

    dispatch({
      type: GET_MOVIES,
      payload: data
    });
  } catch (error) {
    console.log(error);
  }
};

мои типы. js

export const GET_MOVIES = 'GET_MOVIES';

мой магазин. js

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

import rootReducer from './reducers';

const initialState = {};

const middleware = [thunk];

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

export default store;

Answer 1

Ваша ошибка в вызове действия напрямую, вместо connect ed getMovies prop здесь:

const handleClick = () => {
  getMovies();
};

Должно быть:

const handleClick = () => {
  this.props.getMovies();
};