☰

Reactコンポーネントの外部からReduxストアにアクセスする最良の方法は何ですか? 質問する

tag-icon • tag-icon reactjs redux react-redux
Reactコンポーネントの外部からReduxストアにアクセスする最良の方法は何ですか? 質問する

@connectReact コンポーネント内のストアにアクセスしようとするとうまく機能します。しかし、他のコードではどのようにアクセスすればよいのでしょうか。たとえば、アプリでグローバルに使用できる 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() {...}
}

何か洞察やワークフローパターンはありますか?

ベストアンサー1

呼び出したモジュールからストアをエクスポートしますcreateStore。そうすれば、ストアが作成され、グローバル ウィンドウ スペースが汚染されないことが保証されます。

マイストア.js

const store = createStore(myReducer);
export store;

または

const store = createStore(myReducer);
export default store;

マイクライアント.js

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

またはデフォルトを使用した場合

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

複数店舗での使用例

ストアのインスタンスが複数必要な場合は、ファクトリ関数をエクスポートします。async（ を返すpromise）を作成することをお勧めします。

async function getUserStore (userId) {
   // check if user store exists and return or create it.
}
export getUserStore

クライアント側（ブロック内async）

import {getUserStore} from './store'

const joeStore = await getUserStore('joe')

おすすめ記事