无需反应即可访问 redux

Question

我想在不使用 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 组件。让 store 监听变化并派发动作的方法是什么？

提前致谢。

Answer 1

我认为您不应该直接从商店收听更改，但您需要它才能分派操作。

聆听变化

在 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;

Answer 2

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

export const dispatch = store.dispatch

然后您可以从代码中的任何地方调用 dispatch（尽管我几乎只是从事件处理程序中调用）。

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

无需反应即可访问 redux

Access redux without react

javascript

reactjs

redux