在反应组件之外访问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程模式?

5 Solutions collect form web for “在反应组件之外访问Reduce存储的最佳方式是什么?”

从您称为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(...)} 
  • 如何在C#中备份和恢复系统剪贴板?
  • Redux - 多个商店,为什么不呢?
  • SQL Server恢复错误 - 访问被拒绝
  • 在动作创build器中访问Redux状态?
  • 如何备份MySQL数据库中的单个表?
  • PostgreSQL:提高pg_dump,pg_restore的性能
  • 在Redux应用程序中写入localStorage的位置?
  • redux中的常量有什么意义?
  • SQL Server:数据库处于“恢复”状态