訂閱狀態 - Redux

我試圖顯示一些數據，這些數據總是會被更新，但是當我添加一些新的數據存儲時，新數據並沒有在屏幕上看到，因爲我不知道訂閱店鋪方法。但我不知道在哪裏使用它以及如何使用它。我找不到適合我的項目的例子。訂閱狀態 - 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;

如果我應該在這裏引用它，我該如何再次編寫它？

非常感謝！

來源

2017-06-14 Burak ULU

如果DashboardDropdown（該文件的默認導出）在DOM上呈現，那麼現在您已訂閱商店。每當全局狀態（store）發生變化時，每個ConnectedComponent中的每個mapStateToProps都將被調用，給組件（DashboardDropdown）提供新的道具。

來源

2017-06-14 06:29:42

我想我可以幫你解決這個問題 - 你必須在組件中添加一些代碼，將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更新時，應該「訂閱」組件以適應這些更改。

來源

2017-06-14 06:29:54 skwidbreth

訂閱狀態 - Redux

回答

相關問題