订阅状态 - Redux

Question

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

第一个可能的使用方式，就像我搜索它一样 （像 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 状态映射到该组件的 props。

首先，安装

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

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