代码之家 › 专栏 › 技术社区 › Learner

错误:操作必须是纯对象。对异步操作使用自定义中间件。-即使操作也包含该方法

redux reactjs

Learner · 技术社区 · 7 年前

我是新来的反应,只是理解了关于redux的概念,而不使用redux thunk。请看下面的代码

// app.js

import React, { Component } from 'react';
import {connect} from 'react-redux';
import * as actions from './actions'

class App extends Component {
  render() {
    return (
      <div>
        <button onClick={this.props.fetchData}>Show Data</button>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {

  }
}


const mapDispatchToProps = dispatch => {
  return {
    fetchData: () => dispatch(actions.fetchDataHandler)
  }
}



export default connect(mapStateToProps, mapDispatchToProps)(App);


// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {createStore} from 'redux';
import Data from './reducers';
import {Provider} from 'react-redux';

const store = createStore(Data)

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


//actions-index.js

export const fetchDataHandler = e => dispatch => {
    console.log("hit here");
}

//reducers-index.js

// default state
const defaultState = {
    data: null
}

let data;

export default data = (state=defaultState, action) => {
    switch(action.type){
        case "FETCH_DATA": 
            return {
                ...state,
                data: action.payload
            }
        default:
            return{
                ...state
            }
    }
}

文件夹结构为

src 
  actions
    index.js
  reducers
    index.js
  app.js

我没有使用redux thunk,当单击按钮时,它将调用将调用actions.fetchdatahandler的fetchdata。

因此,在控制台上,它应该会收到一条“点击这里”的消息,但它不起作用。

抱歉,如果我不正确理解Redux的概念。

1 回复 | 直到 7 年前

Shubham Khatri 7 年前

在正常的redux流中,操作应该是纯对象,即动作创建者必须返回纯对象,但在您的情况下,由于您不需要使用任何中间件(如redux thunk),因此不能编写类似

//actions-index.js

export const fetchDataHandler = e => dispatch => {
    console.log("hit here");
}

一般的方法是

export const fetchDataHandler = e => {
    console.log("hit here");
    return {
        type: 'MY_ACTION'
    }
}

但是,如果您配置类似 redux-thunk ,您可以在动作创建者中有一个异步动作,比如

//actions-index.js

export const fetchDataHandler = e => dispatch => {
    console.log("hit here");
    API.call().then((res) => {
        dispatch({ type: 'API_SUCCESS', payload: res });
    });
}

另外,您的mapDispatchTopOps不会在Dispatch中调用该操作,您可以这样编写它

const mapDispatchToProps = dispatch => {
  return {
    fetchData: () => dispatch(actions.fetchDataHandler())
  }
}

或

const mapDispatchToProps = {
    fetchData: actions.fetchDataHandler
}

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前