React/Reduxコンポーネントからのストアへの簡単なアクセス

Question

私はReactコンポーネントを使用してどのようにレデューサーを使用するかを考えようとしています。 私の目標はかなり簡単です - 少なくとも私はそう思った：私は引き出し - メニューを切り替えるしたいと思います。私はReact-Onlyでこれを解決できると知っていますが、私はReduxを学びたいと思います。

だから、私は、コンポーネント...また

import React, { Component } from 'react'; 

class Example extends Component { 

// ??? 

    render() { 
    return (
     <button className="burgerbutton" onClick={this.toggleDrawer}</button> 
     <div className="drawerMenu isvisible" ></div> 
    ); 
    } 
} 

export default Example; 

を持っている（それはとても簡単ですので、それをどこに置くか、私は知りませんが）減速

const initialState = { 
    buttonstate: false 
}; 

const example = (state = initialState, action) => { 
    switch (action.type) { 
    case 'TOGGLE_BTN': 
     return Object.assign({}, state, { 
     buttonstate: !state.buttonstate 
     }) 
    default: 
     return state 
    } 
} 

export default example 

とアクション

export const toggleDrawer =() => { 
    return { 
    type: 'TOGGLE_DRAWER' 
    } 
} 

私は多くのチュートリアルを読みましたが、そのほとんどは「Presentational Components」と「Container Co指導者 "と呼ぶ。これらのコンセプトがここにどのように当てはまるのか本当にわかりません。 これを行うには、何をする必要がありますか？私はこの問題を正しい角度から見ていますか、これを解決するには12 "コンテナコンポーネント"が必要ですか？

---

私は本当にこの質問は全く理にかなっている、および/または重複していないですね！

Answer 1

reduxでは、リデューサーの状態を更新するアクションをディスパッチする必要があります。したがって、通常、コンポーネントはレデックスストアに接続され、通信はディスパッチによって行われます。

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { toggleDrawer } from 'action file location'; 

class Example extends Component { 

    toggleDrawerHandler() { 
    this.props.dispatch(toggleDrawer()) 
    } 


    render() { 
    // access button state from this.props.buttonstate 
    return (
     <button className="burgerbutton" onClick={this.toggleDrawerHandler.bind(this)}</button> 
     <div className="drawerMenu isvisible" ></div> 
    ); 
    } 
} 

export default connect((store) => {buttonstate: store.buttonstate})(Example); 

Answer 2

まず、私は本当に基本的にReduxの減速バンドルであるredux "ducks"を使用して楽しんでいます。あなたは、あなたの減速器、アクション定数、およびアクション作成者を1つのファイル（アヒルと呼ばれます）に入れます。次に、異なるモジュールまたは状態の複数のアヒルを持っていて、それらをcombineReducersと組み合わせることができます。

@duwalaniseは正しい考えを持っていますが、私はむしろconnect()の第二のparamを直接派遣するアクションをマッピングするために使用される参照してくださいね（と、それのための良いショートカットがあります）の代わりにthis.props.dispatch

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { toggleDrawer } from './duck'; 

class Example extends Component { 

    render() { 
    const { buttonstate, togglerDrawer } = this.props; 
    return (
     <div> 
     <button className="burgerbutton" onClick={toggleDrawer}</button> 
     <div className="drawerMenu isvisible" ></div> 
     </div> 
    ); 
    } 
} 

const mapStateToProps = (state) => ({ 
    buttonstate: state.buttonstate, 
}); 

export default connect(mapStateToProps, { toggleDrawer })(Example); 

を使用することのあなたのコンポーネントにハンドラメソッドを持っている場合

ワンサイドノートでは、それがこのonClick={() => /* do something */ }またはこのonClick={this.myHandler.bind(this)}Thisは行わない、すなわち、コンストラクタ内.bind(this)を行う代わりに、イベント内の矢印機能や.bind(this)を使用する方が良いでしょう面白い（と長い）それを読んでください。

コンテナ対プレゼンテーションコンポーネントのピースに触れるには：あなたのロジック、ハンドラ、レビュックスアクションなどをすべてあなたのコンテナに入れ、それを小道具を介してあなたの単純な（期待通りにステートレス/純粋な）プレゼンテーションに渡すことですコンポーネント。技術的には、コンポーネントの記述方法は、ステートレスコンポーネントに変換することができます：

const Example = ({ buttonstate, togglerDrawer }) => (
    <div> 
    <button className="burgerbutton" onClick={toggleDrawer}</button> 
    <div className="drawerMenu isvisible" ></div> 
    </div> 
);