如何从非组件辅助函数访问 redux 的商店？

IT技术 javascript reactjs react-redux
2021-05-01 18:52:23

我有一个辅助函数，当我想从我的 redux 存储中删除某些东西时，我会调用它。但是，我需要能够访问函数内的当前存储，以确定下一步要做什么。这是我想要做的：

export function deleteDocument (id) {
    this.props.dispatch(deleteShape({id}));

    const getStore = getStore(); //<-- I need something like this

    if(getStore.documents && !getStore.documents.find(doc => doc.selected)){
        this.props.dispatch(makeTopDocumentSelected());
    }
}

我从一个组件调用这个函数并将“this”上下文传递给它，这样如果你对此感到好奇，它就可以访问调度。但是，如果我尝试引用我传递的props，它不会在“deleteShape”调用后更新，因为此函数未“连接”（因为缺少更好的词）到 redux 存储。所以我的问题是：如何从非组件函数访问当前的 redux 存储？谢谢

1个回答

我必须说，我认为从某些功能随机访问商店是一种不好的做法，并且可能会出现一些副作用，但是如果您必须这样做，这是一种可能的方法：

文件：storeProvider.js

var store = undefined;

export default {
    init(configureStore){
        store = configureStore();
    },
    getStore(){
        return store;
    }
};

文件：App.js

import { createStore } from 'redux';
import rootReducer from './rootReducer';
import storeProvider from './storeProvider';

const configureStore = () => createStore(rootReducer);
storeProvider.init(configureStore);
const store = storeProvider.getStore();

const App = () =>
    <Provider store={store} >
        <Stuff/>
    </Provider>

文件：yourfunction.js

import storeProvider from './storeProvider';

export function deleteDocument (id) {
    this.props.dispatch(deleteShape({id}));

    const state = storeProvider.getStore().getState();

    if(state.documents && !state.documents.find(doc => doc.selected)){
        this.props.dispatch(makeTopDocumentSelected());
    }
}
其它你可能感兴趣的问题
上一篇为什么即使旧状态等于新状态，使用相同的值调用 useState 的 setter 也会随后触发组件更新？ 下一篇找不到module：错误：使用 MongoDB 时无法解析“dns”