状態を購読する - 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に加入したいとしましょうか？

または私はアプリ-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

現在、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); 

これがアップロードすると、あなたは私たちが（Reduxの状態のように）状態をマッピングしているのでconsole.log(this.props.state)は、Reduxの状態を参照することがわかりますコンポーネントの小道具に。 Reduxが更新されると、コンポーネントはそれらの変更に「購読する」必要があります。