访问函数内部的 redux store

Question

我希望从 .js 文件中公开一个函数，在该函数中我希望能够访问存储中的变量。

代码片段：-

import { connect } from 'react-redux';

function log(logMessage) {
    const {environment} = this.props;
    console.debug('environment' + environment + logMessage ); 
    ....
}

function mapStateToProps(state) {
    return {
        environment : state.authReducer.environment
    };
}

export default function connect(mapStateToProps)(log);

我有很多组件，通过connect附加class，我可以通过connect()附加功能吗？

Answer 1

访问商店的正确位置是通过容器，connect用于将容器连接到组件，不能将随机函数连接到它。

有一个 logger middleware for redux 你可能不想看，它可以实现你想要实现的目标。

要使用它，只需将它作为中间件传递给您的商店：

import createLogger from 'redux-logger';

const store = createStore(
  reducer,
  applyMiddleware(logger)
);

调试 redux 应用程序更合适的方法是使用 React Dev Tools, if you use Chrome, I recommend you to use the React Dev Tools Extension. Just install it 并将其用作中间件

let store = createStore(reducer, window.devToolsExtension && window.devToolsExtension());

有了它，您可以随时查看商店的整体状态，查看正在触发的操作以及它们如何影响商店，甚至可以通过取消操作来倒带您的应用程序。

Answer 2

是的。您可以通过连接附加函数，如下所示；

  const mapDispatchToProps = (dispatch) => {
     return {
       testFunction: (param1) => dispatch(testFunction(param1)),
       testFunction1: () => dispatch(testFunction1())
    };
 };

 export default function connect(mapStateToProps, mapDispatchToProps)(log);

Answer 3

编辑 1

Some_File.js

import store from './redux/store.js';

function aFunction(){
   var newState =store.getState();
   console.log('state changed');
}

store.subscribe(aFunction)

我假设你已经按照 redux 的预期创建了 store 和 reducers。

~~~~~~~~~~~~~~~

原始答案开始

这是一种 hack，我不知道你在做什么，所以我不能说你应该或不应该这样做，但你可以就这样我已经复制粘贴了您的一些代码并做了一些修改。

Class XYZ extends React.Component{
     componentWillReceiveProps(props){
       //in your case this.props.storeCopy is redux state.
      //this function will be called every time state changes
     }

     render(){
        return null;
     }
}



function mapStateToProps(state) {
    return {
        storeCopy : state
    };
}

export default function connect(mapStateToProps)(XYZ);

将此组件放在顶部的某处，可能就在 provider 内部，每当状态更改时，将调用此组件的 componentWillReceiveProps。

Answer 4

如果你有一个纯功能组件，那么你可以像这样直接访问 redux 状态：

import store from './redux/store';

function getStoreDetails() {
   console.log(store.getState());
}

Answer 5

redux state 可以通过使用以下格式在函数中作为 prop 访问。

1:

import { connect } from 'react-redux';

// log accepts logMessage as a prop
function log(props) {
    const { environment, logMessage } = props;
    console.debug('environment' + environment + logMessage ); 
    ....
}

function mapStateToProps(state) {
    return {
        environment : state.authReducer.environment
    };
}

export default connect(mapStateToProps)(log);

如何使用日志功能？

log({ logMessage: "Error message" });

2:

// import redux store 
import { store } from './Store';

function log(logMessage) {
    const currentState = store.getState();
    const environment = currentState.authReducer.environment;
    console.debug('environment' + environment + logMessage); 
    ....
}

访问函数内部的 redux store

Accessing redux store inside functions

reactjs

redux

react-redux