访问 redux 而不做出反应

Access redux without react

本文关键字：redux 访问      更新时间：2023-09-26

我想在不使用 React 组件的情况下访问存储（调度和观察）。我一直在寻找几个小时，没有结果。

事实就是如此。我已经在应用程序根目录中创建了商店：

import { Provider } from 'react-redux'
import createStore  from './state/store';
let store = createStore();
ReactDOM.render( 
  <Provider store={store}>
    <App>
  </Provider>, 
  document.getElementById('root')
);
当我

需要添加操作或侦听组件中的状态更改时，我很高兴使用 react-redux 提供的 connect 函数，但是当我想在组件之外设置一些逻辑（主要是调度）时，我卡住了。

简而言之，我想验证一个字段。我想创建一个validation.js文件，我可以在其中侦听来自存储的更改，运行验证逻辑，然后调度包含最终错误的操作。

就商店而言，它不是全局的，我没有使用 React 组件。让商店侦听更改和调度操作的方法是什么？

提前谢谢。

这是我所做的（在创建我的商店之后）：

export const dispatch = store.dispatch

然后，您可以从代码中的任何位置调用dispatch（尽管我几乎只是从事件处理程序中执行此操作）。

如果使用 Redux-Saga 来管理流控制，除了用于直接用户输入的事件处理程序之外，您很少需要使用 dispatch，因为它将调度包装在其put API 中。

我认为您不应该直接从商店监听更改，但您需要它来调度操作。

倾听变化

redux，您调用这种逻辑的自然位置是调度字段中更改的action。

export function updateSomeField(value, field) {
    fieldValidator.validate()
    return { type: ActionTypes.UPDATE_SOME_FIELD, field: field, value: value }
}

fieldValidator可以保存对存储的引用，以便获取他所需的状态，以便使用 store.getState() 执行他的逻辑，或者从操作中获取该数据作为参数（借助异步操作）：

export function updateSomeField(value, field) {
    return (dispatch, getState) => {
        fieldValidator.validate(getState.myScreen.fields)
        dispatch({ type: ActionTypes.UPDATE_SOME_FIELD, field: field, value: value })
    }
}

获取商店

创建后，您可以将其提供给需要它的任何人。您可以通过初始化单例来执行此操作

let store = createStore();
FieldValidator.setInstance(new FieldValidator(store));
// FieldValidator.js
class FieldValidator {
    ...
     static _instance = null;
    static getInstance() {
        return FieldValidator._instance;
    }
    static setInstance(fieldValidator) {
        FieldValidator._instance = fieldValidator;
    }
    ...
}

或通过注入成员

let store = createStore();
fieldValidator.store = store;
相关文章：