在反应组件之外访问Reduce存储的最佳方式是什么?

当我尝试访问反应组件中的商店时,@ @connect非常适用。 但是,我应该如何在其他一些代码中访问它。 例如:假设我想使用授权令牌来创build我的应用程序中可以全局使用的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 

现在我想从我的商店访问一个数据点,这里是如果我试图使用@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() {...} } 

任何见解或工作stream程模式?

    从您称为createStore的模块中导出商店。 那么你放心,它将被创build,不会污染全球窗口空间。

    MyStore.js

    store = createStore(myReducer); export store;

    要么

    store = createStore(myReducer); export default store;

    MyClient.js

    import {store} from './MyStore' store.dispatch(...)

    或者如果你使用默认

    import store from './MyStore' store.dispatch(...)

    find了解决办法。 所以我在我的api util中导入商店,并在那里订阅。 在这个监听器函数中,我使用新提取的令牌设置了axios的全局默认值。

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

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

    也许它可以进一步改善,因为目前看起来有点不雅观。 我后来可以做的是添加一个中间件到我的商店,然后设置令牌。

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

    你甚至可以安全的这个对象window属性访问它的任何部分的应用程序,如果你真的想要它( window.store = store

    更多信息在这里

    似乎Middleware是要走的路。
    请参阅官方文档和这个问题的回购

    对于TypeScript 2.0,它看起来像这样:

    MyStore.ts

     export namespace Store { export type Login = { isLoggedIn: boolean } export type All = { login: Login } } import { reducers } from '../Reducers' import * as Redux from 'redux' const reduxStore: Redux.Store<Store.All> = Redux.createStore(reducers) export default reduxStore; 

    MyClient.tsx

     import reduxStore from "../Store"; {reduxStore.dispatch(...)}