订阅状态 - Redux

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?

这是我的店铺class;

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

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

Answer 2

我想我可以帮助你 - 你必须向你的组件添加一些代码，将 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 更新时，应该 'subscribe' 那些变化的组件。

订阅状态 - Redux

Subscribe the state - Redux

reactjs

redux

react-redux

subscribe

redux-store