Javascript 无法在react redux中分派事件

我是redux新手，我正在尝试对react组件中按钮的点击事件分派操作。 但我无法更新我在reducer中的状态

types.js

export const FETCH_USERS_SUCCESS='FETCH_USERS_SUCCESS';

action.js

import {FETCH_USERS_SUCCESS} from './types';

export const fetchUsersSuccess = () => 
{
    return (
            {
                type:FETCH_USERS_SUCCESS,
                payload:'natalie',
            }
    );
}

reducer.js

import {FETCH_USERS_SUCCESS} from './types';

const initialState={
    users:'mike',
    error:null,
}

const reducer =(state=initialState,action)=> {
    switch(action.type){
        case FETCH_USERS_SUCCESS:
            return {
                ...state,
                users:action.payload,
            }
        default: return state
    }
}

export default reducer;

这是我的app.js

import React from 'react';
import './App.css';
import { connect } from 'react-redux'
import { fetchUsersSuccess } from './action';
class App extends React.Component {
      render(){
      return (
        <div>
          <h1>Hello {this.props.users}</h1>
          <button type="button" value="submit" onClick={this.props.handleSubmit}>submit</button>
        </div>
      );
    }
}

const mapStateToProps = state => {
  return {
    users:state.users
  }
}

const mapDispatchToProps=dispatch=>{
  return {
    handleSubmit: () => {dispatch(fetchUsersSuccess)}
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(App)

从“React”导入React；
导入“/App.css”；
从“react redux”导入{connect}
从“/action”导入{FetchUsersAccess}；
类应用程序扩展了React.Component{
render（）{
返回(
你好{this.props.users}
提交
);
}
}
常量mapStateToProps=状态=>{
返回{
用户：state.users
}
}
const mapDispatchToProps=调度=>{
返回{
handleSubmit:（）=>{dispatch（fetchUsersAccess）}
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（应用程序）

我可以显示初始用户一次，但点击按钮不会改变状态。 有人能建议我为什么不能在react redux中更新用户点击事件吗

---

谢谢。

另一种方法是返回分派函数，然后该函数将返回使用redux thunk中间件完成的操作。它通常用于异步操作

因此，您的FetchUsersAccess应该是

    export const fetchUsersSuccess = (dispatch) => 
    {
        return function() {
            dispatch(
                {
                    type:FETCH_USERS_SUCCESS,
                    payload:'natalie',
                }
        );
    }
}

ES6

然后在组件级，像这样做咖喱

const mapDispatchToProps=dispatch=>{
  return {
    handleSubmit: fetchUsersSuccess(dispatch)
  }
}

现在您可以调用

handleSubmit

或绑定它们了。

mapDispathToProps有两种形式：对象和函数。Redux文档建议使用对象。就你而言

const mapDispatchToProps = {
  handleSubmit: fetchUsersSuccess,
};

---

dispatch（fetchUsersAccess（））

chrome安装。这是redux的调试器，它会救你的命。我没有投反对票，但这不是“建议的模式”。只有在使用redux thunk（或等效中间件）时才能使用该模式。获取并编辑它。你说的是真的……这是我做redux的首选方式^_^

const mapDispatchToProps = {
  handleSubmit: fetchUsersSuccess,
};