当我试图访问react组件中的存储时，@connect工作得很好。但我该如何在其他代码中访问它呢。例如:让我们说我想使用授权令牌来创建我的axios实例，可以在我的应用程序中全局使用，实现这一点的最佳方法是什么?
这是我的api。js
// tooling modules
import axios from 'axios'
// configuration
const api = axios.create()
api.defaults.baseURL = 'http://localhost:5001/api/v1'
api.defaults.headers.common['Authorization'] = 'AUTH_TOKEN' // need the token here
api.defaults.headers.post['Content-Type'] = 'application/json'
export default api
现在我想从我的商店访问一个数据点，这是什么样子，如果我试图在一个react组件中使用@connect获取它
// connect to store
@connect((store) => {
return {
auth: store.auth
}
})
export default class App extends Component {
componentWillMount() {
// this is how I would get it in my react component
console.log(this.props.auth.tokens.authorization_token)
}
render() {...}
}
有什么见解或工作流模式吗?
像@sanchit一样，如果您已经全局定义了axios实例，那么提议的中间件是一个很好的解决方案。
你可以创建一个这样的中间件:
function createAxiosAuthMiddleware() {
return ({ getState }) => next => (action) => {
const { token } = getState().authentication;
global.axios.defaults.headers.common.Authorization = token ? `Bearer ${token}` : null;
return next(action);
};
}
const axiosAuth = createAxiosAuthMiddleware();
export default axiosAuth;
像这样使用它:
import { createStore, applyMiddleware } from 'redux';
const store = createStore(reducer, applyMiddleware(axiosAuth))
它将在每个操作上设置令牌，但您只能侦听例如更改令牌的操作。
这可能有点晚，但我认为最好的方法是使用axios.interceptors如下所示。导入url可能会根据项目设置而改变。
index.js
import axios from 'axios';
import setupAxios from './redux/setupAxios';
import store from './redux/store';
// some other codes
setupAxios(axios, store);
setupAxios.js
export default function setupAxios(axios, store) {
axios.interceptors.request.use(
(config) => {
const {
auth: { tokens: { authorization_token } },
} = store.getState();
if (authorization_token) {
config.headers.Authorization = `Bearer ${authorization_token}`;
}
return config;
},
(err) => Promise.reject(err)
);
}
像@sanchit一样，如果您已经全局定义了axios实例，那么提议的中间件是一个很好的解决方案。
你可以创建一个这样的中间件:
function createAxiosAuthMiddleware() {
return ({ getState }) => next => (action) => {
const { token } = getState().authentication;
global.axios.defaults.headers.common.Authorization = token ? `Bearer ${token}` : null;
return next(action);
};
}
const axiosAuth = createAxiosAuthMiddleware();
export default axiosAuth;
像这样使用它:
import { createStore, applyMiddleware } from 'redux';
const store = createStore(reducer, applyMiddleware(axiosAuth))
它将在每个操作上设置令牌，但您只能侦听例如更改令牌的操作。
用钩子做。我遇到了类似的问题，但我使用的是带有钩子的react-redux。我不想在我的界面代码(例如，react组件)中添加大量专门用于从商店检索/向商店发送信息的代码。相反，我希望使用具有通用名称的函数来检索和更新数据。我的路径是把应用程序的
const store = createSore(
allReducers,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
并在const之前添加export，并在store.js中添加常用的react-redux导入。文件。然后，我在应用程序级别导入到index.js，然后我用通常的import {store}从“./store.js”导入到index.js，然后子组件使用useSelector()和useDispatch()钩子访问商店。
为了在非组件前端代码中访问存储，我使用了类似的导入(即从“../../store.js”导入{store})，然后使用store. getstate()和store.js。分派({*action goes here*})来处理存储的检索和更新(呃，发送动作到)。
