代码之家  ›  专栏  ›  技术社区  ›  Majid Lotfinia

获取存储数据并调度外部组件react native

  •  1
  • Majid Lotfinia  · 技术社区  · 8 年前

    我需要访问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中的user reducer中,并使用redux persist持久化。应用程序。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函数控制台时。log show store为空,而不是show redux store数据。 有人能帮忙吗?

    2 回复  |  直到 8 年前
        1
  •  2
  •   dentemm    8 年前

    您正在应用中创建商店。js,因此只需从那里导出商店:

    const { store, persistor } = configureStore();
    
    export {store}
    

    之后,只需导入即可在任何地方访问该商店:

    import {store} from ./???/App.js
    
        2
  •  0
  •   Esmaeil    8 年前

    我相信您可以访问提供商和应用程序中的商店。js文件。如果我们考虑 setHeader 作为redux的一个操作,您只需使用以下代码即可获得您的状态:

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