CODEWITHSUNDEEP
javascriptreactjsredux
demonoid
demonoid

Reputation: 326

React-redux is not triggering async function

Expected behavior is. when user clicks Follow button, react app sends POST to API, gets back result and changes global state.

When I execute the code below and click on button, process goes until console.log('here1') and I can't see here2. And of course, it doesn't trigger actual POST.

What am I doing wrong?

Follow button

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;
    }
};

and thunk is connected to 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;

Upvotes: 1

Views: 158

Answers (1)

i.brod
i.brod

Reputation: 4603

Change your mapDispatchToProps:

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

  }
}

Edit: Found another problem: Change your function to this:

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

You can't directly call an action, Redux isn't aware of this and nothing will happen. You need to "dispatch" it.

Upvotes: 1

Related Questions