How can i dispatch an action from a helper function in react native

Question

I have a helper.js file which contains all the helper function including the HTTP request handler with axios. Here are my helper.js file codes:

const HTTPRequest = (path, body, method = 'POST', authorizedToken = null) => {
    return new Promise((resolve, reject) => {
        let headers = {
            'Content-type': 'multipart/form-data',
        };

        // Set authorization token
        if (authorizedToken) {
            headers['Authorization'] = "JWT " + authorizedToken;  // Here i want to get user token from the redux store not though passing the token

        }

        const fulHeaderBody = {
            method,
            headers,
            timeout: 20,
            url: path
        };


axios(fulHeaderBody).then(response => {
            if (response.success) {
                resolve(response);
            } else {

                // Show toast about the error
                Toast.show({
                    text: response.message ? response.message : 'Something went wrong.',
                    buttonText: 'Okay',
                    type: 'danger'
                });
                resolve(response);
            }
        }).catch(error => {
            if (error.response) {

               if(error.response.status === 401){
                    // I WANT TO DISPATCH AN ACTION HERE TO LOGOUT CLEAR ALL STORAGE DATA IN REDUX AND CHANGE THE STATE TO INITIAL
               }else{
                    console.log('Error', error.message);
               }
            }  else {
                // Something happened in setting up the request that triggered an Error
                console.log('Error', error.message);
            }
            console.log(error.config);
            reject(error);
        })
    });
};
export default HTTPRequest;

Now then, the problem I am facing is that, how can I dispatch an action from this helper function or how can I get user token from the redux store.

I have tried creating an action name in action.js like this

export function helloWorld() {
    console.log('Hello world has been dispatched');
    return function(dispatch){
        dispatch(helloWorldDispatch());
    }
}
function helloWorldDispatch() {
    return {
        type: 'HELLO_WORLD'
    }
}

and in the reducer :

switch (action.type) {
    case 'HELLO_WORLD': {
        console.log('Hello world Current state',state);
        return state
    }
    default:
        return state
}

And calling it from helper.js like this

inside HTTPRequest function

helloWorld();

I can see only the log Hello world has been dispatched, but I don not see any log from the dispatcher.

Can anyone please tell how can I handle this. ?

user_11665908 · Answer

I assume that you have already installed redux-thunk.

First you need to modify your HTTPRequest function in helper.js. add two more parameter to it dispatch as given below

const HTTPRequest = (path, body, method = 'POST',
                      authorizedToken = null,dispatch,actionCreator) => {

Then in success of your axios call you can add below line

 dispatch(actionCreator.success(response))

similarly for failure you can add as below

 dispatch(actionCreator.failure(error.message))

create an action in action.js file as

export const helperAction=(path, body, method = 'POST',
                      authorizedToken = null) =>{
var actionCreator = {}
actionCreator.success = helloWorld
actionCreator.failure = failureFunction //your failure action

return dispatch => {
  HTTPRequest(path, body, method = 'POST',
                      authorizedToken = null,dispatch, actionCreator)
 }
}

Create action creator and pass that as an argument along with dispatch to your HTTPREQUEST utility available in helper.js file. Now based upon the success and failure response it is initiating the action. using that action you can store the response in redux store and then you can use it in your component.

Updated answer below to solve exact problem. Otherwise I would recommend above solution. Try this

import store from './redux/store.js';
Const func=()=> {}

store.subscribe(func)

user_7747472 · Answer

With the link shared by @Avin Kavish in the comment, here is my solution.

In the helper.js I have imported the store, and now the helper function looks like this

import {store} from "../redux/ConfigureStore"; //I have imported my store

const HTTPRequest = (path, body, method = 'POST', authorizedToken = false) => {
 let getInitialStates = store.dispatch(helloWorld()); //This to dispatch an action
   
}

This is because the store is an object which has few methods including dispatching an action as mention here.

How can i dispatch an action from a helper function in react native

2 Answers