React-Redux async functions using thunk not working - reactjs

Question

Types.js File:
const ADD_TOKENS = "ADD_TOKENS";
export { ADD_TOKENS};
Actions.js File:
import { ADD_TOKENS } from "./types";
function addTokens() {
return {
type: ADD_TOKENS,
};
}
const actionCreators = {
addTokens,
};
export { actionCreators };
Reducers.js File
import { ADD_TOKENS } from "./types";
import getTokens from "../../api/getTokens";
const initialState = {
access_token: null,
refresh_token: null,
expiration_time: null,
};
function applyAddTokens(state) {
console.log("Function being hit"); //yes
return async (dispatch) => {
console.log("Function being hit"); //no
const token = await getTokens();
return {
...state,
access_token: dispath(token.access_token),
refresh_token: dispath(token.refresh_token),
expiration_time: dispath(token.expiration_time),
};
};
}
function reducer(state = initialState, action) {
switch (action.type) {
case ADD_TOKENS:
return applyAddTokens(state);
default:
return state;
}
}
export default reducer;
index.js File
import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { actionCreators as actions } from "./actions";
class Login extends Component {
render() {
const { addTokens } = this.props;
console.log("Props in Login/index.js", this.props);
return (
<View>
<TouchableOpacity onPress={addTokens}>
<Text>Login</Text>
</TouchableOpacity>
</View>
);
}
}
function mapStateToProps(state) {
const { access_token, refresh_token, expiration_time } = state;
return {
access_token,
refresh_token,
expiration_time,
};
}
function mapDispatchToProps(dispatch) {
return {
addTokens: bindActionCreators(actions.addTokens, dispatch)
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Login);
store.js File
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import reducer from "../components/Login/reducers";
const store = createStore(reducer, applyMiddleware(thunk));
export default store;
Why is this not working? Why is applyAddTokens function's thunk not producing anything? Let me know if anyone needs any additional details. getTokens() returns an object that contains access_token, refresh_token, and expiration_time. This worked before when I tried it without async (just regular data without any request).

Answer 1

Your code flow is like below:
In your JSX, upon onPress, you trigger the action addTokens.
This action returns an object of type ADD_TOKENS
Redux will directly execute the reducer (the ADD_TOKENS switch case). Here you are calling an async function applyAddTokens.
Redux will execute it IMMEDIATELY (without waiting for promise result) and returns the output of applyAddTokens function which is a pending promise
That's it.
Solution
First, put all async code in your actions. Keep reducers light and use it only to update state.
To use thunk, your action must return a function (not an object).
See this example as well