получить данные магазина и отправить внешний компонент, реагировать родным

Мне нужно получить доступ к данным хранилища redux и функции диспетчеризации вне компонента реакции (в функции utils)

Я использую React Native, Redux, Redux Saga, Redux Persist. мой файл хранилища конфигурации выглядит следующим образом:

//create the saga middleware
const sagaMiddleware = createSagaMiddleware();

const encryptor = createEncryptor({
secretKey: 'encryptor_key',
  onError(error) {
  console.log('Encryptor error', error);
  // Handle the error.
 },
});

const persistConfig = {
   key: 'root',
   storage,
   transforms: [encryptor],
   whitelist: ['user', 'etc'],
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export default () => {
   const store = createStore(persistedReducer, applyMiddleware(sagaMiddleware));
const persistor = persistStore(store);

sagaMiddleware.run(rootSaga);
 return { store, persistor };
};

после входа пользователя в систему я сохраняю информацию о пользователе и токен oath2 в редукторе пользователя в redux и сохраняю его с помощью Redux Persist. App.js похож на код ниже:

 import configureStore from './services/configureStore';
 const { store, persistor } = configureStore();

 render() {
  return (
    <Provider store={store}>
       <PersistGate loading={<Loading style={{ flex: 1 }} />} persistor={persistor}>
        <AppNavigator />
      </PersistGate>
    </Provider>
  );
}

теперь в api.js мне нужно получить доступ к токену пользователя. Мне нужно проверить время истечения срока действия токена oauth2 перед каждым запросом axios. перед отправкой запроса axios я вызываю функцию setHeader. мой код в api.js выглядит следующим образом:

import configureStore from './configureStore'; //import config store

function setHeader(){
    const { store, persistor } = configureStore();
    console.log('store is:', store.getState())
}

когда я вызываю функцию setHeader console.log show store пуст, вместо show redux store data. кто-нибудь может помочь?


react-native reactjs redux redux-saga redux-persist
person Majid lotfinia    schedule 26.05.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы создаете магазин в App.js, поэтому просто экспортируйте его оттуда:

const { store, persistor } = configureStore();

export {store}

После этого у вас будет доступ к магазину в любом месте, просто импортировав его:

import {store} from ./???/App.js
person dentemm    schedule 26.05.2018
comment
Я думаю, что это правильный ответ, но сейчас я не могу протестировать, я тестирую этот код через 3 дня. - person Majid lotfinia; 26.05.2018
comment
Ничего страшного, удачи! - person dentemm; 26.05.2018
comment
Это был правильный ответ. но я использую это решение с небольшими изменениями в моем коде. Я вызываю configureStore () в файле configureStore.js и экспортирую {store, persistor} в configstore.js, поэтому в app.js и utils.js я импортирую {store, persistor} - person Majid lotfinia; 30.05.2018
comment
Хорошо! Если это сработало, вы можете принять мой ответ как правильный для использования в будущем. Буду признателен! - person dentemm; 30.05.2018

arrow_upward
0
arrow_downward

Я считаю, что у вас есть доступ к Store в Provider и к файлу App.js. И если мы рассматриваем setHeader как действие redux, вы можете просто использовать следующий код для получения своих состояний:

function setHeader() { //Thunk Action
    return (dispatch, getState) => {
        console.log(getState())
    }
}
person Esmaeil    schedule 26.05.2018
comment
setHeader не является действием redux. setHeader - это функция utils вне компонентов, и мне нужен доступ для хранения данных в этой функции - person Majid lotfinia; 26.05.2018