react项目中添加了thunk为什么dispatch(fun())还是报错?

Question

import {createStore,compose,applyMiddleware } from 'redux'

import thunk from 'redux-thunk'

import reducer from '../Reducer/index'

const composeEnhancers =

window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?

window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;

const enhancer = composeEnhancers(

applyMiddleware(thunk)

);

const store = createStore(reducer, enhancer);

export default store;

这是store的配置 中间件使用了thunk

function mapdispatchtoprops(dispatch){

return{

setLoginState:dispatch(login(token))

}

}

export default connect(null,mapdispatchtoprops)(withRouter(Login));

这是component中的使用

const login = (token)=>{

return {

type:'login',token:token,loginStatus:true

}

}

const loginAction = (token) => dispatch =>{

if(Object.getOwnPropertyNames(token).length > 0 ){

dispatch(login(token))

}else{

return false;

}

}

export default {loginAction,login}

这是自定的action

在component在执行报错：

Uncaught TypeError: Object(...) is not a function

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

你提供的代码似乎没有正确地将thunk中间件应用到你的React组件中。thunk是一个Redux的中间件，它允许你在函数式的上下文中处理异步操作。但是，在你的例子中，当你试图调用dispatch()时，你实际上是尝试调用一个对象的属性，而不是一个函数。

为了解决这个问题，你需要确保mapDispatchToProps和connect组件都是以函数的形式传递给withRouter组件，并且dispatch参数是loginAction函数本身，而不是任何其他类型的值。

这是一个修改后的版本，你应该能够运行并看到结果：

// 导入必要的库
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './configureStore';

// 创建 Redux Store
const store = configureStore();

// 定义 Login Component
class Login extends React.Component {
  state = {
    token: '',
    loginStatus: false,
  };

  // 定义登录状态的 action
  const login = (token) => ({
    type: 'login',
    token,
    loginStatus: true,
  });

  // 获取 token 的 action
  const getLoginToken = () => ({ type: 'GET_TOKEN' });

  // 登录逻辑
  async componentDidMount() {
    try {
      const response = await fetch('https://api.example.com/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          token: this.state.token,
        }),
      });
      const data = await response.json();
      if (response.ok) {
        this.setState({ loginStatus: true });
      }
    } catch (error) {
      console.error(error);
    }
  }

  render() {
    return (
      <div>
        {/* 在这里你可以添加你的 UI */}
        {this.props.loginAction(this.state.token)}
      </div>
    );
  }
}

// 绑定 props 到 Login
const mapStateToProps = (state) => ({
  token: state.token,
});

const mapDispatchToProps = {
  loginAction,
};

const withConnect = connect(mapStateToProps, mapDispatchToProps);

// 使用 Redux Provider 和 Connect
const App = withConnect(withRouter(Login));
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

这段代码应该可以正常工作，并返回预期的结果。