获取存储数据并调度外部组件反应原生答案

【问题标题】：get store data and dispatch outer component react native获取存储数据并调度外部组件反应原生
【发布时间】：2018-11-05 15:55:20
【问题描述】：

我需要访问 redux 存储数据并在 react 组件外部调度函数（在 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 存储数据。有人可以帮忙吗？

【问题讨论】：

标签： reactjs react-native redux redux-saga redux-persist

【解决方案1】：

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

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

【讨论】：

setHeader 不是 redux 的动作。 setHeader 是组件外部的 utils 函数，我需要访问以在此函数中存储数据

【解决方案2】：

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

const { store, persistor } = configureStore();

export {store}

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

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

【讨论】：

我认为这是一个正确的答案，但我现在无法测试，我在 3 天后测试此代码。
没关系，祝你好运！
这是一个正确的答案。但我使用这个解决方案，我的代码几乎没有变化。我在 configureStore.js 文件中调用 configureStore() 并在 configstore.js 中导出 {store, persistor} 所以在 app.js 和 utils.js 中我导入 {store, persistor}
好的！如果它有效，您可以接受我的回答是正确的，以供将来参考。我将不胜感激！