如何在功能组件或类组件之外访问我的 redux 状态？

Posted 2023-03-16

【中文标题】如何在功能组件或类组件之外访问我的 redux 状态？

【英文标题】：How to access my redux state outside of the functional component or class component?

【发布时间】：2022-01-04 13:43:05

【问题描述】：

我创建了一个名为 auth 的 reducer，并在这个 reducer 中持久化。

我想在功能组件或类组件之外获取 auth 值，例如在 utils.我该怎么做？

authAction.js

export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';

export const LoginSuccess = (payload) => 
    return 
        type: LOGIN_SUCCESS,
        payload
    ;
;

authReducer.js

import  LOGIN_SUCCESS  from './authAction';
// INITIAL TIMER STATE
const initialState = 
    user: 
;
// Auth REDUCER
export const authReducer = (state = initialState,  type, payload ) => 
    switch (type) 
        case LOGIN_SUCCESS:
            return  ...state, user: payload ;
        default:
            return state;
    
;

persist auth reducer

const reducers = 
   auth: authReducer
;

const persistConfig = 
    key: 'primary',
    storage,
    whitelist: ['auth'] // place to select which state you want to persist
;

【参考方案1】：

这不是真正的“react-redux”方式。您的商店是反应应用程序的一部分，它只是一个大型反应组件。但是，您可以在应用程序之外的单独模块中创建您的商店，并在您想要导入商店的instance 的地方使用它。

例如，您在store.js 创建商店：

// store.js
export default createStore(reducer, preloadedState, enhancers);

然后，您可以将其导入您的反应应用程序中

// app.jsx
import store from '/path/to/store';
import  Provider  from 'react-redux';

function App () 
  <Provider store=store>everything else</Provider>

在你的工具里面

// my-util.js
import store from '/path/to/store';

function util() 
  // do whatever you want with same instance of store
  // for example, return current state
  return store.getState()

如果您需要或只是获取当前状态，您可以订阅商店。或者，您可以通过替换 reducer 来完成复杂的工作，以实现无缝的客户端更新。