React Redux - コンポーネントに変更が反映されていない

Question

メニューを生成するための単純なReactコンポーネントを作成しましたが、可視性トグルをStateの代わりにReduxに置き換えたいと考えました。

私のコンポーネントは次のようになります。

class SiteMenu extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    toggle(force = false) { 
    let active = !active; 

    store.dispatch({ 
     type: 'TOGGLE', 
     active 
    }); 
    } 

    render() { 
    const wrapperClass = this.props.active ? `${this.props.className}__wrapper ${this.props.className}__wrapper--active` : `${this.props.className}__wrapper`; 
    return (
     <nav className={this.props.className} ref="nav"> 
     <button className={`${this.props.className}__trigger`} onClick={this.toggle.bind(this)}> 
      {this.props.active} 
     </button> 
     <ul className={wrapperClass}> 
     </ul> 
     </nav> 
    ); 
    } 
} 

私はmapStateToPropsを追加しました：

const mapStateToProps = (store) => { 
    return { 
    active: store.menuState.active 
    } 
}; 

とconnect

connect(mapStateToProps)(SiteMenu); 

マイストア：

import { createStore } from 'redux'; 
import reducers from './reducers/index.js'; 

const store = createStore(reducers, window.devToolsExtension && window.devToolsExtension()); 
export default store; 

の

とレデューサー：私は私のReduxのデベロッパーツールをチェックすると

import { combineReducers } from 'redux'; 
import menuReducer from './menu-reducer'; 

const reducers = combineReducers({ 
    menuState: menuReducer 
}); 

export default reducers; 

---

const initialMenuState = { 
    active: false 
}; 

const menuReducer = (state = initialMenuState, action) => { 
    switch(action.type) { 
    case 'TOGGLE': 
     console.log(action); 
     return Object.assign({}, state, { active: action.active }); 
    } 

    return state; 
}; 

export default menuReducer; 

、状態が変化しています。私は何をすべきか？レポで

コード：https://github.com/tomekbuszewski/react-redux

Answer 1

を参照してください、this.props.dispatchを通じてアクションをディスパッチまたはmapDispatchToPropsを使用することができますコンポーネント

const SiteMenuWrapped = connect(mapStateToProps)(SiteMenu); 

///in Parent component 
<Header className="site-header"> 
     <SiteMenuWrapped 
     className="site-navigation" 
     content={this.state.sections} 
     /> 
</Header> 

Answer 2

いくつかの問題：

1. connectはそう最高のアドバイスは、別のファイルに各コンポーネントを分割し、connectの結果をエクスポートすることで、より高次のコンポーネントを返します。例を参照してください。 http://redux.js.org/docs/basics/ExampleTodoList.html。これは、mapStateToProps関数が呼び出されないことを意味します。なぜthis.props.activeは常に未定義ですか。
2. ストアの登録が間違っています。createStoreの2番目のパラメータが初期状態です。 Chrome Reduxデベロッパーツールを登録するには、<Provider>を使用してすべてのコンポーネントで使用できるようにしてください。https://github.com/zalmoxisus/redux-devtools-extension
3. Reduxのドキュメントを参照してください。
4. また、あなたが反応する-Reduxのを

   render(<Provider store={store}><Parent /></Provider>, app); 
   

   からプロバイダを追加する必要があり、あなたが親に包まれたコンポーネントを追加する必要があり、FUNCを接続使用するhttps://github.com/reactjs/react-redux/blob/master/docs/api.md