访问函数内部的 redux 存储

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附加类，我可以通过connect()附加函数吗？

Answer 1

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

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

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

import createLogger from 'redux-logger';

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

调试 redux 应用更合适的方法是使用React Dev Tools，如果你使用 Chrome，我建议你使用React Dev Tools Extension。只需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 和 reducer。

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

原始答案开始

这是一种 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); 
    ....
}