Невозможно получить доступ к хранилищу резервов в сервисе action / api (без функции connect ())

Question

Я пытаюсь получить токен из моего auth редуктора в моем приложении для последующих запросов на дополнительные ресурсы.

Проблема в том, что у меня нет доступа к store.getState() или storeгде-нибудь за пределами моих компонентов. Как actions/api service.

Я помню, как раньше делал приложение, где я мог без проблем.

Вот надуманный пример: https://stackblitz.com/edit/react-redux-app-1wxxab?file=index.js Я сделал базовыйприложение todo, и вы можете видеть в actions/index.js, что когда я console.log(store) получаю неопределенное значение.

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

Другой пример: https://stackoverflow.com/a/43944684/1356046 говорят, что это работает так, но я не могу воспроизвести его.

В любом случае, чтобы это исправитьи получить доступ к состоянию магазина? Все перепробовал со вчерашнего дня. Спасибо.

Answer 1

Клонировал ваш стек и внес следующие изменения:

В вашем файле API сделайте следующее:

import store from './store';

Добавьте store.js с содержанием:

import { configureStore } from "redux-starter-kit";
import rootReducer from './reducers'


const store = configureStore({
  reducer: rootReducer,
});

export default store;

И изменил ваш index.js на:

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import App from './components/App'
import store from './store'


render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Я бы все же выбрал сохранение токена в локальном хранилище,если пользователь вошел в систему и открыл другую вкладку, ему необходимо снова войти в систему, поскольку другая вкладка не имеет доступа к токену, то же самое происходит, когда пользователь переходит на другой сайт и затем возвращается на ваш сайт.

Answer 2

Экспортируйте хранилище, когда вы его создали, затем используйте его, например, store.dispatch(action); или создайте промежуточное ПО для конкретного API

См. Каков наилучший способ получить доступ к хранилищу резервов вне компонента реагирования? длямножество примеров

Обновление:

https://stackblitz.com/edit/react-redux-app-1mswrv

store.js:

import { configureStore } from "redux-starter-kit";
import rootReducer from './reducers'

export const store = configureStore({
  reducer: rootReducer,
});

index.js:

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import App from './components/App'
import { store } from "./store";

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

api.js:

import {store} from './store';

// Some promise which dispatches a fetch request after getting the token from the store

export const getSomething = () => {
  console.log('store:', store);
  return store;
}