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

修改1

Some_File.js

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

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

store.subscribe(aFunction)

我假设您已经按照redux的预期创建了存储和缩减器。

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

原始答案开始

这是一种黑客，我不知道你在做什么，所以我不能说你应该或你不应该这样做，但你可以这样做。我已经复制了一些代码并进行了一些修改。

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 2

如果您具有纯功能组件，则可以像这样直接访问redux状态：

import store from './redux/store';

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

Answer 3

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

还有一个logger middleware用于还原，你可能不会去看看，它会做你想要达到的目标。

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

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 4

是。您可以通过连接附加功能，如下所示;

*,*:before,*:after {box-sizing:border-box;}

.wrapper{
  position:relative;
  width:460px;
  border:1px solid black;
  padding: 0 8px;
  margin: 0;
  height: 600px;
  overflow:hidden;
}

.wrapper:hover {
  overflow-y:auto;
  padding-right:7px;
}

.item {
  position: relative;
  width:100%;
  height: 150px;
  background-color: gray;
  margin: 8px 0;
}

Answer 5

可以使用以下格式将

redux状态作为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

5 个答案: