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

【问题标题】：How to access my redux state outside of the functional component or class component?如何在功能组件或类组件之外访问我的 redux 状态？
【发布时间】：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
};

【问题讨论】：

标签： javascript reactjs redux state store

【解决方案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 来完成复杂的工作，以实现无缝的客户端更新。

【讨论】：