Подписывай штат - 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;

Если я должен подписать это здесь, как я могу снова написать это?

Большое спасибо!

Источник

2 ответа

Решение

Если DashboardDropdown (экспорт этого файла по умолчанию) отображается в DOM на данный момент, то вы теперь подписаны на хранилище. Всякий раз, когда изменяется глобальное состояние (хранилище), каждый mapStateToProps в каждом ConnectedComponent будет вызываться, давая компоненту (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 обновляется, это должно "подписать" компонент на эти изменения.

Источник
Другие вопросы по тегам