尽管react-redux中的reducer状态，但ACTION并未连接到reducer

Question

I put logic of action for getting API DATA by AXIOS, then as dispatch method I tried to put received datas into state. But at this point actions didn't go to reducer.

(6) [{…}, {…}, {…}, {…}, {…}, {…}]
index.js:23 Uncaught (in promise) TypeError: dispatch is not a function
at index.js:23

Just I got that error above. This means this action did get a API data then when it try to dispatch, failed. I could find the connection point of this.

I attach some JavaScript:

reducer.js:

import * as types from '../Actions/Types';

const initialState = {
  contents: [{
    poster: 'https://i.imgur.com/633c18I.jpg',
    title: 'state title',
    overview: 'state overview',
    id: 123,
  }],
  content: {},
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case types.LOADING_DATA: {
      console.log(`something happend ${action.payload}`);
      return state.set('contents', action.payload);
    }

    case types.BTN_ON_CHANGE: {
      return state;
    }

    case types.BTN_ON_CLICK: {
      return state;
    }

    case types.BTN_ON_SUBMIT: {
      return state;
    }

    default:
      return state;
  }
};

export default reducer;

actions.js

 import axios from 'axios';

import * as types from './Types';


const holder = [];
const API_GET = () => (
  axios.get('https://api.themoviedb.org/3/search/movie?api_key=<<APIKEY>>&query=avengers+marvel')
    .then(res => res.data)
    .then(data => console.log(data.results))
    .then(results => holder.add(results))
);

// export const loadingData = value => ({
//   type: types.LOADING_DATA,
//   value,
// });

export const loadingData = () => (dispatch) => {
  axios.get('https://api.themoviedb.org/3/search/movie?api_key=54087469444eb8377d671f67b1b8595d&query=avengers+marvel')
    .then(res => res.data)
    .then(data => console.log(data.results))
    .then(results => dispatch({
      type: types.LOADING_DATA,
      payload: results,
    }));
};

export const sample = () => (
  console.log('none')
);

LoadingDataButton.js:

    import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Button } from 'antd';
import { loadingData } from '../Actions';

const LoadingDataButton = props => (
  <div>
    <Button
      type="danger"
      onClick={
      props.loadingData()
    }
    >
            Loading
    </Button>
  </div>
);

LoadingDataButton.propTypes = {
  loadingData: PropTypes.func.isRequired,
};

const mapStateToProps = state => ({
  contents: state.contentR.contents,
});
const mapDispatchToState = {
  loadingData,
};

export default connect(mapStateToProps, mapDispatchToState)(LoadingDataButton);

Answer 1

You need to have your action creators return functions that perform the asynchronous requests, right now your action creators only return objects, we can return functions using redux-thunk middleware

Then you would write your action creators that make api calls like this

export const fetchThreadData = id => dispatch => {
  dispatch({
    type: FETCH_THREADS_REQUESTING,
    isLoading: true
  });

  const request = axios({
    method: "GET",
    url: "SOME API ADDRESS"
  });

  return request.then(
    response =>
      dispatch({
        type: FETCH_THREADS_SUCCESSFUL,
        payload: response.data,
        isLoading: false
      }),
    error =>
      dispatch({
        type: FETCH_THREADS_FAILED,
        payload: error || "Failed to fetch thread",
        isLoading: false
      })
  );
};

Answer 2

Thank you guys who made a answer for my question, actually I solved this problem a quite easy way.

import { createStore, applyMiddleware, compose } from 'redux';
// import saga from 'redux-saga';
import thunk from 'redux-thunk';

import rootReducer from './rootReducer';

const initialState = {};

const middleWare = [thunk];

const store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware(...middleWare),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
  ),
);

export default store;

I planned to use SAGA after making this, but once I change middleware as thunk, it worked out well. Maybe I need to figure out how thunk works out.

Even if I prefer to use SAGA for this time I want to say thank you for Thunk.