首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在react组件之外访问redux store的最佳方式是什么?

在react组件之外访问redux store的最佳方式是什么?
EN

Stack Overflow用户
提问于 2016-07-19 22:09:55
回答 3查看 155.8K关注 0票数 254

当我试图访问react组件中的存储时,@connect工作得很好。但是我应该如何在其他一些代码中访问它呢?例如:假设我想使用一个授权令牌来创建可以在我的应用程序中全局使用的axios实例,那么实现这一目标的最佳方法是什么?

这是我的api.js

代码语言:javascript
复制
// 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

现在,我想从我的存储中访问一个数据点,下面是我试图使用@connect在react组件中获取它时的样子

代码语言:javascript
复制
// 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() {...}
}

有什么见解或工作流程模式吗?

EN

回答 3

Stack Overflow用户

发布于 2016-07-20 19:52:14

找到了解决方案。所以我在我的api util中导入了商店,并在那里订阅了它。在该侦听器函数中,我用新获取的令牌设置了axios的全局默认值。

这是我的新api.js的样子:

代码语言:javascript
复制
// tooling modules
import axios from 'axios'

// store
import store from '../store'
store.subscribe(listener)

function select(state) {
  return state.auth.tokens.authentication_token
}

function listener() {
  let token = select(store.getState())
  axios.defaults.headers.common['Authorization'] = token;
}

// configuration
const api = axios.create({
  baseURL: 'http://localhost:5001/api/v1',
  headers: {
    'Content-Type': 'application/json',
  }
})

export default api

也许它可以进一步改进,因为目前它看起来有点不雅。稍后我可以做的就是向我的商店添加一个中间件,并在此时此地设置令牌。

票数 62
EN

Stack Overflow用户

发布于 2016-07-19 22:27:48

您可以使用从createStore函数返回的store对象(在应用初始化时应该已经在您的代码中使用)。然后,您可以使用此对象通过store.getState()方法获取当前状态,或使用store.subscribe(listener)订阅存储更新。

如果您确实需要它(window.store = store),您甚至可以将此对象保存到window属性,以便从应用程序的任何部分访问它

更多信息可以在Redux documentation中找到。

票数 28
EN

Stack Overflow用户

发布于 2020-05-24 22:52:45

这可能有点晚了,但我认为最好的方法是使用axios.interceptors,如下所示。导入urls可能会根据您的项目设置而改变。

index.js

代码语言:javascript
复制
import axios from 'axios';
import setupAxios from './redux/setupAxios';
import store from './redux/store';

// some other codes

setupAxios(axios, store);

setupAxios.js

代码语言:javascript
复制
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)
    );
}
票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/38460949

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档