无法在 react-redux 中发送事件

Question

我是 redux 的新手，我正在尝试对 React 组件中按钮的单击事件发送操作。 但是我无法更新减速器中的 state。

类型.js

export const FETCH_USERS_SUCCESS='FETCH_USERS_SUCCESS';

动作.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)

我能够显示一次初始用户，但单击按钮不会更改 state。有人可以建议为什么我不能在 react-redux 中的单击事件上更新用户吗？

谢谢。

Answer 1

另一种方法是返回一个 dispatch function 然后返回使用 redux-thunk 中间件完成的操作。 它通常用于异步操作。

所以，你的 fetchUsersSuccess 应该是

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

ES6

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

然后在组件级别，像这样进行柯里化。

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

现在您可以调用handleSubmit或已经绑定它们。

Answer 2

https://react-redux.js.org/using-react-redux/connect-mapdispatch#two-forms-of-mapdispatchtoprops

mapDispathToProps 有两个 forms：object 和 function。Redux 文档建议使用 object。在您的情况下。

const mapDispatchToProps = {
  handleSubmit: fetchUsersSuccess,
};