在反应组件之外访问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(...)}
