@connect
反応コンポーネント内のストアにアクセスしようとすると、うまく機能します。しかし、他のコードでどのようにアクセスすればよいでしょうか。たとえば、アプリでグローバルに使用できる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
次に、ストアからデータポイントにアクセスしたいと思います。次のコマンドを使用して、reactコンポーネント内でデータポイントをフェッチしようとすると、このようになります。 @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() {...}
}
そこに洞察やワークフローパターンはありますか?
api
内にインポートしApp
て、認証トークンを取得した後に実行できますapi.defaults.headers.common['Authorization'] = this.props.auth.tokens.authorization_token;
。同時に、それをlocalStorageにも保存できるため、ユーザーがページを更新すると、トークンがlocalStorageに存在するかどうか、およびトークンが存在するかどうかを確認できますそれを設定できます。取得したらすぐに、apiモジュールにトークンを設定するのが最善だと思います。