Question

我希望在不使用React Components的情况下访问商店（发送和观察）。我一直在寻找几个小时，没有结果。

情况就是这样。我在App根目录中创建了商店：

import { Provider } from 'react-redux'
import createStore  from './state/store';

let store = createStore();

ReactDOM.render( 
  <Provider store={store}>
    <App>
  </Provider>, 
  document.getElementById('root')
);

当我需要添加动作或监听组件中的状态更改时，我很高兴使用connect提供的react-redux函数，但是当我想在组件外部设置一些逻辑时（主要是我被困了。

简而言之，我想验证一个字段。我想创建一个validation.js文件，我可以在其中侦听来自商店的更改，运行验证逻辑，然后发送带有最终错误的操作。

就商店而言，它不是全局的，我没有使用React组件。让商店听取变更和分派行动的方法是什么？

提前致谢。

Answer 1

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

export const dispatch = store.dispatch

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

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

Answer 2

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

倾听变化

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

访问redux没有反应

2 个答案: