Доступ к Redux store из служебного модуля - PullRequest
Новая
       8

Доступ к Redux store из служебного модуля

0 голосов
/ 26 апреля 2018

Я пытаюсь экспортировать мой магазин в файл, чтобы настроить Axios глобально.В частности, чтобы вставить токен из хранилища в общий заголовок авторизации.Приложение работает локально с weback-dev-server .

Вот код для точки входа в приложение: 

import React from 'react';
import ReactDOM from 'react-dom';
import createHistory from 'history/createBrowserHistory';
import { createStore, compose, applyMiddleware } from 'redux';
import { ConnectedRouter, routerMiddleware } from 'react-router-redux';
import { Route } from 'react-router';
import Promise from 'redux-promise';
import ReduxThunk from 'redux-thunk';
import { Provider } from 'react-redux';
import { logger } from 'redux-logger';
import Bootstrap from 'bootstrap/dist/css/bootstrap.css';

import reducers from './reducers';
import Header from './components/Header.component';

const history = createHistory();
const middleware = [ Promise, ReduxThunk, logger ];
const store = createStore(
   reducers,
   undefined,
   compose(applyMiddleware(...middleware, routerMiddleware(history)))
);

export default store;

const App = () => (
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <div>
                <Header />
            </div>
        </ConnectedRouter>
</Provider>
);

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

Вот файл, который настраивает Axios: 

import axios from 'axios';

import store from '../src/main';

const select = state => state.auth.token;

const handleStoreChanges = () => {
const token = select(store.getState());
axios.defaults.headers.common.Authorization = `Bearer ${ token }`;
};
 store.subscribe(handleStoreChanges);

const api = axios.create({
baseURL: process.env.ADMIN_BASE_URL
 });

export default api;

Когда я пытаюсь импортировать api, я получаю следующую ошибку, потому что store не определен, что наводит меня на мысль, что импорт разрешен до его создания, может быть?-:

Uncaught TypeError: Невозможно прочитать свойство 'subscribe' из неопределенного

1 Ответ

0 голосов
/ 26 апреля 2018

Есть несколько способов справиться с этим, но простой способ - внедрить ваш магазин, используя вместо этого функцию. 

// axios file

import axios from 'axios';

const select = state => state.auth.token;

const api = axios.create({
  baseURL: process.env.ADMIN_BASE_URL
});

export const injectStore = store => {
  store.subscribe(() => {
    const token = select(store.getState());
    axios.defaults.headers.common.Authorization = `Bearer ${ token }`;
  })
}

export default api;

// store file

import { injectStore } from './api'

const store = createStore();

injectStore(store)

Однако, для меня более логично, что файл api не знаетмагазина, вместо этого экспортирует сеттеры 

// axios file

import axios from 'axios';

const api = axios.create({
  baseURL: process.env.ADMIN_BASE_URL
});

export const tokenSelector = state => state.auth.token;

export const setAuthHeader = token => {
  axios.defaults.headers.common.Authorization = `Bearer ${ token }`;
}

export default api;

// store file

import { tokenSelector, setAuthHeader } from './api'

const store = createStore();

store.subscribe(() => {
  const token = tokenSelector(store.getState());
  setAuthHeader(token)
})
...