React-redux не запускает функцию asyn c

Question

Ожидаемое поведение есть. когда пользователь нажимает кнопку Follow, приложение реагирует, отправляет POST API, возвращает результат и изменяет глобальное состояние.

Когда я выполняю приведенный ниже код и нажимаю на кнопку, процесс продолжается до console.log('here1'), и я не вижу here2. И, конечно же, он не вызывает фактического POST.

Что я делаю не так?

Нажмите кнопку

import {follow, unfollow} from "../../../redux/actions/userAction";
import connect from "react-redux/es/connect/connect";
....
followBtnClk() {

    this.setState({followInProgress: true});
    if (this.props.auth.isAuthenticated) {
        const toggle = !this.props.profile.following;
        if (toggle)
            follow(this.props.profile.username);
        else
            unfollow(this.props.profile.username);
    }
    this.setState({followInProgress: false});
}
...
const mapStateToProps = store => ({
    auth: store.auth,
    profile: store.user,
    isAuthenticated: store.auth.isAuthenticated,
});

const mapDispatchToProps = {
    follow,
    unfollow
};

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

userAction.jsx

export const follow = (username) => {
    console.log("here1");
    return async dispatch => {
        console.log("here2");
        const payload = await UserFollow({username: username})
        return dispatch({
            type: USER_FOLLOW,
            payload: payload
        });
    };
};

services / user.jsx

export const UserFollow = async data => {
    return await send("post", `u/` + data.username + `/user/profile/follow`, {}, host);
};

userReducer.jsx

export default (state = currentState, action) => {
    switch (action.type) {
        case SET_USER_CREDENTIALS:
            return {
                ...state,
                update_date: Date.now()
            };

        case USER_FOLLOW:
            return {...state, following: action.payload};
        case USER_UNFOLLOW:
            return {...state, following: action.payload};
        case FETCH_PROFILE:
            return action.payload;
        case CLEAR_PROFILE:
            return initialState;
        default:
            return state;
    }
};

и thunk подключены к хранилищу. js

import {createStore, applyMiddleware, compose} from 'redux';
import thunk from 'redux-thunk';
import rootReducer from "./reducers";

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
    rootReducer,
    composeEnhancers(applyMiddleware(thunk)
    ));

store.subscribe(() => {
    localStorage['redux'] = JSON.stringify(store.getState())
});

export default store;

Answer 1

Измените mapDispatchToProps:

const mapDispatchToProps = dispatch => {
  return {    
    follow: (username) => dispatch(follow(username)),
    unfollow: (username) => dispatch(unfollow(username))

  }
}

Редактировать: Найдена другая проблема: Измените вашу функцию на:

followBtnClk() {

    this.setState({followInProgress: true});
    if (this.props.auth.isAuthenticated) {
        const toggle = !this.props.profile.following;
        if (toggle)
            this.props.follow(this.props.profile.username);
        else
            this.props.unfollow(this.props.profile.username);
    }
    this.setState({followInProgress: false});
}

Вы не можете напрямую вызвать действие, Redux не осознавать это и ничего не случится. Вам нужно «отправить» его.