我有一个 helper.js
文件,其中包含所有辅助函数,包括带有 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;
现在,我面临的问题是,我如何从这个辅助函数中分派(dispatch)一个 Action ,或者我如何从 redux 存储中获取 user token
。
我试过像这样在 action.js
中创建一个 Action 名称
export function helloWorld() {
console.log('Hello world has been dispatched');
return function(dispatch){
dispatch(helloWorldDispatch());
}
}
function helloWorldDispatch() {
return {
type: 'HELLO_WORLD'
}
}
在 reducer 中:
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
,但我看不到来自调度程序的任何日志。
任何人都可以告诉我该如何处理这个问题。 ?
最佳答案
我假设你已经安装了 redux-thunk。
首先,您需要修改 helper.js 中的 HTTPRequest 函数。向其添加两个参数 dispatch 如下所示
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)
关于javascript - 我如何从 native react 中的辅助函数分派(dispatch)一个 Action ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56668450/