@connect
funciona muito bem quando estou tentando acessar a loja dentro de um componente de reação. Mas como devo acessá-lo em algum outro código? Por exemplo: digamos que eu queira usar um token de autorização para criar minha instância axios que possa ser usada globalmente no meu aplicativo, qual seria a melhor maneira de conseguir isso?
Este é meu 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
Agora eu quero acessar um ponto de dados da minha loja. Aqui está como isso seria se eu estivesse tentando buscá-lo em um componente de reação usando @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() {...}
}
Existem idéias ou padrões de fluxo de trabalho por aí?
reactjs
redux
react-redux
Subodh Pareek
fonte
fonte
api
naApp
classe e depois de obter a autorização de token que você pode fazerapi.defaults.headers.common['Authorization'] = this.props.auth.tokens.authorization_token;
, e ao mesmo tempo você pode armazená-lo em localStorage bem, então quando as atualizações do usuário da página, você pode verificar se o token existe no localStorage e se , você pode configurá-lo., acho que será melhor configurar o token no módulo api assim que você o receber.Respostas:
Exporte a loja do módulo com o qual você ligou
createStore
. Então, você tem certeza de que ambos serão criados e não poluirão o espaço global da janela.MyStore.js
ou
MyClient.js
ou se você usou o padrão
Para vários casos de uso de armazenamento
Se você precisar de várias instâncias de uma loja, exporte uma função de fábrica. Eu recomendaria fazê-lo
async
(retornando apromise
).No cliente (em um
async
bloco)fonte
store.getState()
Encontrei uma solução. Então eu importo a loja no meu api util e assino lá. E nessa função de ouvinte, defino os padrões globais dos axios com meu token recém-buscado.
É assim que meu novo
api.js
visual é:Talvez possa ser melhorado ainda mais, porque atualmente parece um pouco deselegante. O que eu poderia fazer mais tarde é adicionar um middleware à minha loja e definir o token naquele momento.
fonte
store.js
aparência do seu arquivo?Você pode usar o
store
objeto retornado dacreateStore
função (que já deve ser usada no seu código na inicialização do aplicativo). Você pode usar esse objeto para obter o estado atual com ostore.getState()
método oustore.subscribe(listener)
se inscrever para armazenar atualizações.Você pode até salvar esse objeto na
window
propriedade para acessá-lo de qualquer parte do aplicativo, se realmente quiser (window.store = store
)Mais informações podem ser encontradas na documentação do Redux .
fonte
store
awindow
Parece que
Middleware
é o caminho a percorrer.Consulte a documentação oficial e esse problema em seu repositório
fonte
Como o @sanchit, o middleware proposto é uma boa solução se você já estiver definindo sua instância do axios globalmente.
Você pode criar um middleware como:
E use-o assim:
Ele definirá o token em todas as ações, mas você só poderá ouvir ações que alterem o token, por exemplo.
fonte
Para o TypeScript 2.0, seria assim:
MyStore.ts
MyClient.tsx
fonte
Pode ser um pouco tarde, mas acho que a melhor maneira é usar
axios.interceptors
como abaixo. Os URLs de importação podem mudar com base na configuração do seu projeto.index.js
setupAxios.js
fonte
Fazendo isso com ganchos. Eu tive um problema semelhante, mas estava usando o react-redux com ganchos. Eu não queria restringir meu código de interface (por exemplo, reagir componentes) com muito código dedicado à recuperação / envio de informações de / para a loja. Em vez disso, eu queria funções com nomes genéricos para recuperar e atualizar os dados. Meu caminho foi colocar o aplicativo
em um módulo nomeado
store.js
e adicionandoexport
antesconst
e adicionando as importações usuais do react-redux no store.js. Arquivo. Em seguida, importei paraindex.js
o nível do aplicativo, que depois importei para o index.js com o habitualimport {store} from "./store.js"
Os componentes filho acessaram a loja usando osuseSelector()
botõesuseDispatch()
ganchos .Para acessar a loja no código de front-end sem componente, usei a importação análoga (ou seja
import {store} from "../../store.js"
) e, em seguida, useistore.getState()
estore.dispatch({*action goes here*})
manipulei a recuperação e atualização (er, enviando ações para) a loja.fonte
Uma maneira fácil de acessar o token é colocar o token no LocalStorage ou no AsyncStorage com React Native.
Abaixo um exemplo com um projeto React Native
authReducer.js
e
api.js
Para a Web, você pode usar em
Window.localStorage
vez do AsyncStoragefonte