时间戳

首页 > 解决方案 > 尽管 react-redux 中的减速器处于状态，但 ACTION 并未附加到减速器

javascript - 尽管 react-redux 中的减速器处于状态，但 ACTION 并未附加到减速器

问题描述

我将通过 AXIOS 获取 API DATA 的操作逻辑放入，然后作为调度方法，我尝试将接收到的数据置于状态。但是在这一点上，reducer 并没有采取行动。

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

只是我在上面得到了那个错误。这意味着此操作确实获得了 API 数据，然后在尝试分派时失败。我可以找到这个的连接点。

我附上了一些JavaScript：

减速器.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;

动作.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')
);

加载数据按钮.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);

标签： javascriptreactjsreduxreact-reduxreducers

解决方案

谢谢那些回答我问题的人，实际上我用一种非常简单的方法解决了这个问题。

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;

我计划在制作完这个之后使用 SAGA，但是一旦我将中间件更改为 thunk，效果很好。也许我需要弄清楚 thunk 是如何工作的。

即使这次我更喜欢使用 SAGA，我也要感谢 Thunk。

推荐阅读