如何修复'动作必须是普通对象。使用自定义中间件进行异步操作。

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何修复'动作必须是普通对象。使用自定义中间件进行异步操作。相关的知识,希望对你有一定的参考价值。

我正在制作一个React-redux组件来嵌入Laravel刀片文件。在反应方面,

我正在使用redux和thunk,当我尝试从Laravel路由获取没有thunk的数据时,它正常运行。

但是当我在动作创建器中使用axios请求来异步获取数据时。它给出了:

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

这是反应方的入口组成部分。

Entry.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import reducer from '../store/reducers/reducer';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import thunk from "redux-thunk";


const store = createStore(reducer, applyMiddleware(thunk)
+window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
// console.log(getState());

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

这是App.js的主要组件

import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from 'prop-types';
import axios from 'axios';
import {getCurrentPostLikes} from '../store/actions/actions';

class App extends Component {
    constructor(props) {
        super(props)

        var domain = window.location.hostname;
        var url = window.location.pathname;
        var urlsplit = url.split("/");
        var post_slug = urlsplit[urlsplit.length - 1];

        this.state={
            post_slug: post_slug,
            post_likes:''
        }
    }

    kFormatter(num) {
        return num > 999 ? (num / 1000).toFixed(1) + 'k' : num
    }

    componentDidMount() {
        this.props.getCurrentPostLikes();
        // axios.get(`/api/get_post_likes/${this.state.post_slug}`)
        // .then(response => {
        //     console.log(response.data.likes);
        //     this.setState({
        //         post_likes: response.data.likes
        //     })
        // })
    }

  render() {
    return (
      <div className="App">
        <a href="javascript:"><img src="/images/love.svg" alt="post like" width="50px" height="50px"/></a>
        <p>{this.kFormatter(this.state.post_likes)}</p>
        <p><span>{this.props.likes}</span></p>
      </div>
    );
  }
}


export default connect(null, {getCurrentPostLikes})(App);
// export default connect( mapStateToProps, mapDispachToProps )(App);

这是actions.js文件/store/actions/actions.js

// types.js is also defined properly as
// export const GET_POST_LIKES = 'GET_POST_LIKES';

import axios from 'axios';
import {GET_POST_LIKES} from './types';

// Get current post likes
export const getCurrentPostLikes = () => dispatch => {
  return dispatch => {
    setTimeout(() => {
      axios.get(`/api/get_post_likes/2`)
          .then(res => {
              // console.log(response.data.likes);
              // console.log(getState());
            setTimeout(() => {
                dispatch({
                    type: GET_POST_LIKES,
                    payload: res.data.likes
                })
            }, 4000);
          })
          .catch(err => {
              dispatch({
                  type: GET_POST_LIKES,
                  payload: {}
              })
          })
    }, 3000);
  }
}

尝试了这个动作创建者,但仍然是同样的错误

export const getCurrentPostLikes = () => {
  return dispatch => {
      axios.get(`/api/get_post_likes/2`)
          .then(res => {
                dispatch({
                    type: GET_POST_LIKES,
                    payload: res.data.likes
                })
          })
          .catch(err => {
              dispatch({
                  type: GET_POST_LIKES,
                  payload: {}
              })
          })
  }
}

这是/store/reducers/reducer.js下的reducers.js文件

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

const initialState = {
    likes: null
};

const reducer = (state=initialState, action) => {
    const newState = {...state};

    switch(action.type){
        case 'GET_POST_LIKES':
            return {
                ...state,
                post: action.payload
            }

        case 'LIKE_UP':
            newState.likes += action.value
            break;
    }
    return newState;
};

export default reducer;

现在,这应该返回posts表的字段值,使用post id = 2

答案

这是使用redux-thunk的动作创建者curried函数的“签名”:

export const getCurrentPostLikes = () => async dispatch => {
  const response = await axios.get(`/api/get_post_likes/2`);
  dispatch({ type: GET_POST_LIKES, payload: response.data.likes });
};
另一答案

你的问题出在Entry.js,这一行:

const store = createStore(reducer, applyMiddleware(thunk) +window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

您将thunk中间件设置为第二个参数。第二个参数用于初始状态。 thunk中间件应该是createStore函数第三个参数中组合增强器的一部分。

参数应如下应用:

createStore(
  connectRouter(history)(rootReducer),
  initialState,
  composedEnhancers
)

完整示例:

import { createStore, applyMiddleware, compose } from 'redux'
import { connectRouter, routerMiddleware } from 'connected-react-router'
import thunk from 'redux-thunk'
import createHistory from 'history/createHashHistory'
import rootReducer from './core/reducers'

export const history = createHistory()

const initialState = {}
const enhancers = []
const middleware = [thunk, routerMiddleware(history)]

if (process.env.NODE_ENV === 'development') {
  const devToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION__

  if (typeof devToolsExtension === 'function') {
    enhancers.push(devToolsExtension())
  }
}

const composedEnhancers = compose(
  applyMiddleware(...middleware),
  ...enhancers
)


export default createStore(
  connectRouter(history)(rootReducer),
  initialState,
  composedEnhancers
)
另一答案

看来你的行动有一个额外的dispatch =>

export const getCurrentPostLikes = () => dispatch => {

    setTimeout(() => {
      axios.get(`/api/get_post_likes/2`)
          .then(res => {
              // console.log(response.data.likes);
              // console.log(getState());
            setTimeout(() => {
                dispatch({
                    type: GET_POST_LIKES,
                    payload: res.data.likes
                })
            }, 4000);
          })
          .catch(err => {
              dispatch({
                  type: GET_POST_LIKES,
                  payload: {}
              })
          })
    }, 3000);

}
另一答案

这就是您希望动作创建者看起来的样子:

export const getCurrentPosts = () => {
  return async function(dispatch, getState) {
    const response = await axios.get("/api/get_post_likes");
    dispatch({ type: "GET_POST_LIKES", payload: response });
  };
};

保留Promise,并使用ES7 async/await语法,并省略setTimeout,除非你能提供一个非常好的理由,想要超时已经花费非零时间完成的异步请求,也许我不明白,但你确实想要那些数据不是吗?您的Reducer必须完成他们的工作并最终更新您的应用程序中的状态。

我上面的内容并不完美,因为它的样板,就像你在那里真的不需要getState,不是真的,是的,它是中间件的一部分,但如果你不打算使用某些东西,不需要定义它,但无论如何我试图让你的行动创造者再次工作,你正在饶恕你的眼睛和思想。

以上是关于如何修复'动作必须是普通对象。使用自定义中间件进行异步操作。的主要内容,如果未能解决你的问题,请参考以下文章

修复错误:动作必须是普通对象。相反,实际类型是:“未定义”。您可能需要将中间件添加到您的商店设置中

动作必须是普通对象。 Redux 不工作

动作必须是普通对象。将自定义中间件用于测试库而不是应用程序上的异步操作

动作必须是普通对象。使用自定义中间件

动作必须是普通对象。使用自定义中间件

Redux thunk - 错误 · 动作必须是普通对象。使用自定义中间件进行异步操作,即使调度具有键类型的对象