React-redux 沒有觸發異步 function

Question

預期的行為是。 當用戶點擊 Follow 按鈕時，React 應用發送 POST 到 API，取回結果並更改全局 state。

當我執行下面的代碼並單擊按鈕時，過程一直進行到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
        });
    };
};

服務/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連接到 store.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))

  }
}

編輯：發現另一個問題：將您的 function 更改為：

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 不知道這一點，什么也不會發生。 你需要“派遣”它。