Javascript 如何从react native中的助手函数分派操作

我有一个

helper.js

文件，其中包含所有helper函数，包括axios的HTTP请求处理程序。以下是我的

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;

现在，我面临的问题是，如何从这个helper函数中分派操作，或者如何从redux存储中获取

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

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

在减速器中：

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

从

helper.js

这样调用它

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

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

内置

HTTPRequest

功能

helloWorld();

我只能看到日志

Hello world已被调度

，但我看不到来自调度程序的任何日志

---

谁能告诉我怎么处理这件事吗

我假设您已经安装了redux thunk

首先，您需要修改helper.js中的HTTPRequest函数。向其添加另外两个参数调度，如下所示

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

然后，在axios呼叫成功后，您可以添加以下行

 dispatch(actionCreator.success(response))

同样，对于故障，您可以添加如下内容

 dispatch(actionCreator.failure(error.message))

在action.js文件中创建一个action作为

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

创建action creator并将其作为参数传递给helper.js文件中提供的HTTPREQUEST实用程序。现在，根据成功和失败的反应，它正在启动行动。使用该操作，您可以将响应存储在redux存储中，然后在组件中使用它

更新了下面的答案以解决确切的问题。否则我会推荐上述解决方案。 试试这个

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

store.subscribe(func)

---

有了@Avin Kavish在评论中分享的链接，下面是我的解决方案

在

helper.js

中，我导入了存储，现在helper函数如下所示

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

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

从“./redux/ConfigureStore”导入{store}//我已经进口了我的商店
const HTTPRequest=（路径、正文、方法='POST'，authorizedToken=false）=>{
让getInitialStates=store.dispatch（helloWorld（））；//这是用来分派操作的
.
@WillJenkins，你是什么意思？我需要把它交给我的助手？我怎么能参考
调度文件
？我不明白我是redux的新手。调用
helloWorld（）
返回一个接受分派函数的函数。您需要将分派函数交给helper方法，以便它可以调用分派。@AvinKavish从哪里可以交给分派函数？例如，我应该从某处导入它吗？或者在从组件调用它时，我应该用
HTTPRequest
传递它吗nt或我如何做到这一点？你能分享一个例子吗？这真的很有帮助。在调用时将其分配到
HTTPRequest
是最简单和直接的方法，它可以防止你的
HTTPRequest
需要连接到商店。这是我的观点，我不是redux专家。这篇文章可能有更好的方法是，我假设我需要从组件调用
helperAction（）
，对吗？如果是这样，它不会分派任何操作。它也分派一个操作，您可以在那里检查它。它将分派作为参数传递给Httprequest函数。