如何解决错误:“操作必须是普通对象”?

里德尔

我是使用sagas的新手,无法解决“操作必须是普通对象。对异步操作使用自定义中间件”的问题。

我附上了所有必要的代码。已经伤了头解决了这个问题。希望对您有所帮助。

我查看了sagas的文档,但未发现有关此错误的任何信息。我还看了反应样板,那里已经有渣气,但是我想在CRA上做

行动

import { AXIOS } from "../api";

import { takeLatest, put, call } from "redux-saga/effects";

export const GET_GENRES_PENDING = "GENRES::GET_GENRES_PENDING";
export const GET_GENRES_FULFILLED = "GENRES::GET_GENRES_FULFILLED";
export const GET_GENRES_REJECTED = "GENRES::GET_GENRES_REJECTED";

export const getGenresPending = () => ({
  type: GET_GENRES_PENDING
});

export const getGenresFulfilled = data => ({
  type: GET_GENRES_FULFILLED,
  payload: data
});

export const getGenresRejected = error => ({
  type: GET_GENRES_REJECTED,
  payload: error
});

export function* getGenresAction() {
  try {
    yield put(getGenresPending());
    const data = yield call(() => {
      return AXIOS.get(
        "/movie/list?api_key=5fcdb863130c33d2cb8f1612b76cbd30&language=ru-RU"
      ).then(response => {
        console.log(response);
      });
    });
    yield put(getGenresFulfilled(data));
  } catch (error) {
    yield put(getGenresRejected(error));
  }
}

export default function* watchFetchGenres() {
  yield takeLatest("FETCHED_GENRES", getGenresAction);
}

商店

import { applyMiddleware, compose, createStore } from "redux";
import createSagaMiddleware from "redux-saga";
import rootReducer from "./reducers";
import watchFetchGenres from "./actions/getGenresAction";

const sagaMiddleware = createSagaMiddleware();

export function configureStore(initialState) {
  const middleware = [sagaMiddleware];
  const composeEnhancers =
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  const store = createStore(
    rootReducer,
    initialState,
    composeEnhancers(applyMiddleware(...middleware))
  );
  sagaMiddleware.run(watchFetchGenres);
  return store;
}

index.js

import React from "react";
import ReactDOM from "react-dom";

import { Provider } from "react-redux";

import App from "./containers/App";

import * as serviceWorker from "./serviceWorker";

import { configureStore } from "./core/configureStore.js";

const store = configureStore({});

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

serviceWorker.unregister();

App.js

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";

import MoviesContainer from "./MoviesContainer/MoviesContainer";
import FilterContainer from "./FilterContainer/FilterContainer";

import { Container, GlobalStyle } from "./style.js";

export default function App() {
  return (
    <Container className="app">
      <GlobalStyle />
      <Router>
        <Route exact path="/" component={FilterContainer} />
        <Route path="/movies" component={MoviesContainer} />
      </Router>
    </Container>
  );
}

容器

import React, { useState, useEffect } from "react";

import { connect } from "react-redux";
import { bindActionCreators } from "redux";

import watchFetchGenres from "../../core/actions/getGenresAction";

import Card from "../../components/Card/Card";
import Button from "../../components/Button/Button";
import TextInput from "../../components/TextInput/TextInput";
import { TitleH1, TitleH2, TitleCard } from "../../components/Title/Title";

import { Container, SecondaryContainer } from "../style.js";

class FilterContainer extends React.Component {
  // const dispatch = useDispatch();

  // useEffect(() => {
  //   getGenresAction();
  //   // fetch('https://api.themoviedb.org/3/genre/movie/list?api_key=5fcdb863130c33d2cb8f1612b76cbd30&language=en-US')
  // });

  componentDidMount() {
    this.props.watchFetchGenres();
  }
  render() {
    return (
      <Container>
        <TitleH1 title="Фильтры" />
        <SecondaryContainer>
          <TextInput placeholder="Введите название фильма" />
        </SecondaryContainer>
        <SecondaryContainer filters>
          <Card>
            <TitleCard title="Фильтр по жанру" />
          </Card>
          <Card>
            <TitleCard title="Фильтр по рейтингу" />
          </Card>
          <Card>
            <TitleCard title="Фильтр по году" />
          </Card>
        </SecondaryContainer>
        <SecondaryContainer>
          <Button primary value="Применить фильтры" placeholder="lala" />
        </SecondaryContainer>
      </Container>
    );
  }
}

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

const mapDispatchToProps = dispatch =>
  bindActionCreators({ watchFetchGenres }, dispatch);

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(FilterContainer);
尼古拉斯塔

bindActionCreators({watchFetchGenres},dispatch);

watchFetchGenres不是动作创建者,因此这是不正确的。动作创建者是返回动作的函数。您的代码中有3个示例:

export const getGenresPending = () => ({
  type: GET_GENRES_PENDING
});

export const getGenresFulfilled = data => ({
  type: GET_GENRES_FULFILLED,
  payload: data
});

export const getGenresRejected = error => ({
  type: GET_GENRES_REJECTED,
  payload: error
});

这些是您应该绑定的事物类型。

您的传奇故事正在监听类型为“ FETCHED_GENRES”的动作,因此现有的3个动作创建者将无法使用该动作。您可能需要创建另一个动作创建者,如下所示:

export const fetchGenres = () => ({
  type: 'FETCHED_GENRES',
});

然后,在mapDispatchToProps中,您将使用此动作创建者:

const mapDispatchToProps = dispatch =>
  bindActionCreators({ fetchGenres }, dispatch);

并更新您称之为的位置:

componentDidMount() {
  this.props.fetchGenres();
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

来自分类Dev

如何解决:错误:动作必须是普通对象。使用自定义中间件进行异步操作。

来自分类Javascript

Redux操作上的错误必须是普通对象

来自分类Dev

如何解决“动作必须是普通对象。将自定义中间件用于异步动作。]”?

来自分类Dev

我该如何解决查询对象错误-ValueError:无法查询“ mayur”:必须是“ User”实例

来自分类Dev

如何解决“参数必须是实现Countable的数组或对象?”

来自分类Dev

使用分派返回操作必须是普通对象

来自分类Dev

错误:动作必须是普通对象。使用自定义中间件执行异步操作。

来自分类Dev

Redux错误:动作必须是普通对象。使用自定义中间件进行异步操作

来自分类Dev

如何解决“右侧操作数无效”错误?

来自分类Dev

如何解决错误?

来自分类Dev

使用Google登录时,如何解决错误为“添加到UIAlertController的操作必须具有标题”的错误而导致的崩溃?

来自分类Dev

Redux错误操作必须是普通对象。使用自定义中间件进行异步操作

来自分类Dev

我收到此错误:操作必须是普通对象。使用自定义中间件进行异步操作

来自分类Dev

react-redux错误:操作必须是普通对象。使用自定义中间件进行异步操作

来自分类Dev

如何解决错误的对象变量或未设置块变量?

来自分类Java

在Java中访问对象函数时如何解决错误?

来自分类Dev

如何解决“不要将对象用作类型”的错误?

来自分类Dev

如何解决SQL Server中的“对象已存在”错误

来自分类Dev

如何解决错误使用对象分解优先分解-React

来自分类Dev

如何解决“ GeoDataFrame对象没有属性...”错误

来自分类Dev

如何解决错误“ Nonetype对象没有属性'bind'”?

来自分类Dev

错误:动作必须是普通对象。使用自定义中间件执行异步操作。在React Native中

来自分类Dev

如何解决“ TypeError:int()参数必须是字符串,类似字节的对象或数字,而不是'NoneType'”

来自分类Dev

布线错误,如何解决?

来自分类Dev

如何解决NSAppleMusicUsageDescription错误

来自分类Dev

如何解决以下错误?

来自分类Dev

如何解决UndefinedBehaviorSanitizer错误?

来自分类Dev

如何解决分割错误?

来自分类Dev

如何解决StaleElementReferenceException错误

TOP 榜单

热门标签

归档