Как я могу отправить действие из вспомогательной функции в реагировать родной

Question

У меня есть файл helper.js, который содержит все вспомогательные функции, включая обработчик HTTP-запросов с axios. Вот мои helper.js коды файлов:

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;

Теперь проблема, с которой я сталкиваюсь, заключается в том, как я могу отправить действие из этой вспомогательной функции или как я могу получить user token из хранилища с избыточностью.

Я пытался создать имя действия в action.js, как это

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

и в редукторе:

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

И вызывая его с helper.js вот так

внутри HTTPRequest функция

helloWorld();

Я вижу только журнал Hello world has been dispatched, но я не вижу ни одного журнала от диспетчера.

Может кто-нибудь сказать, пожалуйста, как я могу справиться с этим.

Answer 1

Я предполагаю, что вы уже установили redux-thunk.

Сначала вам нужно изменить функцию HTTPRequest в helper.js. добавьте к нему еще два параметра dispatch , как указано ниже

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

Тогда в случае успеха вашего аксиос звонка вы можете добавить строку ниже

 dispatch(actionCreator.success(response))

аналогично для сбоя вы можете добавить, как показано ниже

 dispatch(actionCreator.failure(error.message))

создать действие в файле action.js как

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

Создайте создатель действия и передайте его в качестве аргумента вместе с отправкой в ​​вашу утилиту HTTPREQUEST, доступную в файле helper.js. Теперь, основываясь на ответах об успехе и неудаче, он начинает действие. используя это действие, вы можете сохранить ответ в избыточном хранилище, а затем использовать его в своем компоненте.

Обновлен ответ ниже, чтобы решить точную проблему. В противном случае я бы порекомендовал выше решение. Попробуйте это

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

store.subscribe(func)

Answer 2

Со ссылкой, предоставленной @Avin Kavish в комментарии, вот мое решение.

В helper.js я импортировал магазин, и теперь вспомогательная функция выглядит следующим образом

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
   <ALL OTHER CODES AS ABOVE HERE>
}

Это потому, что хранилище - это объект, который имеет несколько методов, включая отправку действия, как упомянуто здесь .