时间戳

首页 > 解决方案 > React-redux 没有触发异步功能

javascript - React-redux 没有触发异步功能

问题描述

预期的行为是。当用户点击关注按钮时，react 应用程序将 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
        });
    };
};

服务/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;

标签： javascriptreactjsredux

解决方案

更改您的 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 不知道这一点，什么也不会发生。您需要“发送”它。

推荐阅读