获取存储数据并分派外部组件反应本机

Question

我需要在 React 组件外部访问 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 的用户 reducer 中，并使用 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 我需要访问用户令牌。我需要在每个 axios 请求之前检查 oauth2 令牌过期时间。在 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 显示存储为空，而不是显示 redux 存储数据。有人可以帮忙吗？

Answer 1

我相信您可以访问 Store in Provider 和 App.js 文件。如果我们将 setHeader 视为 redux 的一个动作，您可以简单地使用以下代码来获取您的状态：

function setHeader() { //Thunk Action
    return (dispatch, getState) => {
        console.log(getState())
    }
}

Answer 2

您正在 App.js 中创建商店，因此只需从那里导出商店：

const { store, persistor } = configureStore();

export {store}

之后，您只需导入即可在任何地方访问商店：

import {store} from ./???/App.js

获取存储数据并分派外部组件反应本机

get store data and dispatch outer component react native

reactjs

react-native

redux

redux-saga

redux-persist