无法在 react-redux 中发送事件

Question

I am new to redux, I am trying to dispatch action on click event of button in react component. But i cant update state i have in 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;

and this is my 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)

I am able to display initial user once but clicking on button does not change state. Can anyone suggest why i cant update user on click event in react-redux?

Thanks.

Answer 1

Another approach is to return a dispatch function which will then return the action which is done by using redux-thunk middleware. It is normally used for async operations.

So, your fetchUsersSuccess should be

    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',
            }
    );

And then at the component level, do a currying like this.

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

Now you can call the handleSubmit or bind them already.

Answer 2

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

mapDispathToProps has two forms: object and function. Redux documentation recommend to use object. In your case.

const mapDispatchToProps = {
  handleSubmit: fetchUsersSuccess,
};