@connect当我尝试在react组件中访问商店时，它的工作效果很好。但是我应该如何通过其他一些代码来访问它。例如：假设我想使用授权令牌创建可以在我的应用程序中全局使用的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() {...}
}
有任何见解或工作流程模式吗？
用钩子做。我遇到了类似的问题，但是我在使用带有钩子的react-redux。我不想用很多专门用于从商店检索信息/向商店发送信息的代码来充实我的界面代码（即，对组件进行反应）。相反，我希望使用具有通用名称的函数来检索和更新数据。我的路径是将应用程序的
放入名为的模块
store.js，export然后const在store.js中添加常规的react-redux导入，然后添加。文件。然后，我index.js在应用程序级别导入，然后使用通常import {store} from "./store.js"的子组件导入index.js。然后，子组件使用useSelector()和useDispatch()钩子访问商店。为了使用非组件前端代码访问商店，我使用了类似的导入（即
import {store} from "../../store.js"），然后使用store.getState()并store.dispatch({*action goes here*})处理了商店的检索和更新（或向商店发送操作）。