订阅状态 - Redux - 源码之家

问题描述：

我试图显示一些数据，这些数据总是会被更新，但是当我添加一些新的数据存储时，新数据并没有在屏幕上看到，因为我不知道订阅店铺方法。但我不知道在哪里使用它以及如何使用它。我找不到适合我的项目的例子。订阅状态 - Redux

第一次使用的可能性，因为我没有搜索它（使用它像mapStateToProps）;

const mapStateToProps = (state) => { 
    return { 
     dashboardsList: state.header.dashboardsList, 
     templatesList: state.header.templatesList 
    } 
} 

DashboardDropdown.propTypes = { 
    dashboardsList: PropTypes.array, 
    templatesList: PropTypes.array 
}; 

export default connect(mapStateToProps, null)(DashboardDropdown);

比方说，我想订阅state.header.templatesList，我该怎么写呢？

或者我应该认购state.header.templatesList在APP-store.js？

这是我的商店类;

const RootReducer = (state = {}, action) => { 
    return { 
    [HeaderModule.constants.NAME]: HeaderModule.reducer(
     state[HeaderModule.constants.NAME], 
     action 
    ), 
    [AuthModule.constants.NAME]: AuthModule.reducer(
     state[AuthModule.constants.NAME], 
     action 
    ), 
    [DashboardViewModule.constants.NAME]: DashboardViewModule.reducer(
     state[DashboardViewModule.constants.NAME], 
     action, 
    ), 
    [TemplateViewModule.constants.NAME]: TemplateViewModule.reducer(
     state[TemplateViewModule.constants.NAME], 
     action, 
    ), 
    [WidgetContainerModule.constants.NAME]: WidgetContainerModule.reducer(
     state[WidgetContainerModule.constants.NAME], 
     action 
    ) 
    } 
} 
const Store = createStore(RootReducer, applyMiddleware(thunk, logger())); 

export default Store;

如果我应该在这里引用它，我该如何再次编写它？

非常感谢！

答

如果DashboardDropdown（该文件的默认导出）在DOM上呈现，那么现在您已订阅商店。每当全局状态（store）发生变化时，每个ConnectedComponent中的每个mapStateToProps都将被调用，给组件（DashboardDropdown）提供新的道具。

答

我想我可以帮你解决这个问题 - 你必须在组件中添加一些代码，将Redux状态映射到该组件的道具。

首先，安装react-redux - $ npm install --save react-redux，如果你还没有。

喜欢的东西：

MyComponent.jsx

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 

const mapStateToProps = state => ({ 
    state 
}); 

class MyComponent extends Component { 

    constructor(props) { 
     super(props); 
    } 

    componentDidMount(){ 
     console.log(this.props.state) 
    } 

    render(){ 
     return(
      <div>Hello</div> 
     ) 
    } 

} 

export default connect(mapStateToProps, undefined)(MyComponent);

当这个加载了，你会看到console.log(this.props.state)将参照Redux的状态，因为我们已经映射的状态（如Redux的状态）到组件的道具。 Redux更新时，应该“订阅”组件以适应这些更改。

订阅状态 - Redux

相关推荐