Question

我正在尝试显示一些将始终更新的数据，但是当我添加一些新数据进行存储时，屏幕上看不到新数据，因为我不知道订阅商店方法。但我不知道在哪里使用它以及如何使用它。我找不到任何适合我项目的例子。

第一种可能性，就像我搜索它一样（像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 ，我该怎么写呢？

或者我应该在 app-store.js 中订阅 state.header.templatesList ？

这是我的商店类;

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;

如果我在这里补充它，我怎么能再写一次呢？

非常感谢！

Answer 1

我想我可以帮助你 - 你必须在组件中添加一些代码，将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状态）映射到组件的props。当Redux更新时，应该将组件“订阅”给那些更改。

Answer 2

如果现在在DOM上呈现DashboardDropdown（该文件的默认导出），那么您现在订阅了该商店。每当全局状态（存储）发生更改时，将调用每个ConnectedComponent中的每个mapStateToProps，为组件（DashboardDropdown）提供新的props。

订阅州 - Redux

2 个答案: