0

I'm trying to display some data which will always be updated but when I add some new data to store, the new data is not seen on the screen as I didn't know about subscribe to store method. But I don't know where to use it and how to use it. I couldn't find any suitable example for my project.

First possibility to use as I did search on it (use it like 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);

Let's say I want to subscribe to state.header.templatesList, how can I write it?

Or should I subscribe the state.header.templatesList in the app-store.js?

This is my store 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;

If I should subsribe it here, how can I again write it?

Thanks a lot!

4

2 回答 2

1

I think I can help you with this - you'll have to add some code to your components that will map the Redux state to that component's props.

First, install react-redux - $ npm install --save react-redux, if you haven't yet.

Something like:

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);

When this loads up, you'll see that console.log(this.props.state) will refer to the Redux state, because we have mapped the state (as in the Redux state) to the props of the component. When Redux updates, that should 'subscribe' the component to those changes.

于 2017-06-14T06:29:54.500 回答
0

If DashboardDropdown (the default export of that file) is rendered on the DOM as of now, then you are now subscribed to the store. Whenever the global state (store) changes, every mapStateToProps in every ConnectedComponent will be invoked giving the component (DashboardDropdown) the new props.

于 2017-06-14T06:29:42.120 回答