Reactを使用してReduxのReducerに処理が渡されない

Question

reduxを使用してテーマを適用するコードを記述しています。ここ は私のコードです：index.js

アクション/ index.js

export const CHANGE_THEME = 'CHANGE_THEME'; 

export const changeTheme = (payload) => { 
    console.log('payload ' + payload) 
    return ({ 
    type: CHANGE_THEME, 
    payload 
})} 

レデューサー/

import { combineReducers } from 'redux' 
import themeChangeHandler from './themeChangeHandler' 

const rightBarMenuHandler = combineReducers({ 
    themeChangeHandler 
}) 

export default rightBarMenuHandler 

themeChangeHandler.js

const themeChangeHandler = (state = 'light', action) => { 
    console.log('rec action ' + action.type) 

    switch(action.type) { 
    case 'CHANGE_THEME': 
     return action.payload 

    default: 
     return state 
    } 
} 

export default themeChangeHandler 

イベント/メニューを使用していますMenuItem

class AppBarRightButtonsMenu extends Component { 
    constructor(props) { 
      super(props); 
     } 
     onClickButton = (data) => { 
      this.props.dispatch(changeTheme('dark')) 
     } 
     render() { 
      const {onThemeChange, onLogout, dispatch} = this.props; 
      var i = 1; 
      if(NavigationButtonMenu) { 
      var list = NavigationButtonMenu.map((menuItem) => { 
       return <MenuItem key={i++} primaryText={menuItem.name} onClick = {this.onClickButton}/>; 
       }); 
       return <Menu >{list}</Menu>; 
       } else { 
       return <div/> 
       } 
    } 
    } 
export default connect()(AppBarRightButtonsMenu); 

App.js

const App = ({theme}) => (
    <SomeComp 
     theme={theme} 
    /> 
function mapStateToProps(state) { 
    console.log('state.themeChangeHandler ' + state.themeChangeHandler) 
    return { 
     theme: state.themeChangeHandler === 'dark'?darkBaseTheme:customTheme, 
    }; 
} 

export default connect(mapStateToProps, null) (App); 

追加ストア

const store = createStore(reducers) 
ReactDOM.render(<Provider store={store}> 
    <App /> 
</Provider>, document.getElementById('root')); 
registerServiceWorker(); 

私はアクションでコンソールログが、減速中ではない1（私はブート時に減速機のテスト・ログの取得）を取得。私は間違って何をしていますか？

Answer 1

店舗の設定方法を教えてください。あなたはあなたのレデューサーを「組み合わせた」が、あなたは店をまだ結線していない。

import { createStore, combineReducers } from 'redux'; 
import { Provider } from 'react-redux'; 

// create the store from the reducers 
const store = createStore(combineReducers(/*...your reducers here...*/)); 

// You probably want to let your components have access to the store's state. 
const AppWithStore = (
    <Provider store={store}> 
    <App /> 
    </Provider> 
); 

ReactDOM.render(<AppWithStore />, document.getElementById('whatever')); 

これをすべて設定すると、Appコンポーネントと同じようにストア状態にアクセスできます。

Providerコンポーネントの詳細は、React documentationのReduxバインディングに記載されています。

あなたがそれに慣れたら、ダン・アブラモフの優れたcourse on idiomatic Reduxをお勧めします。これには、最初のビデオに店舗や店舗の状態でできることがいくつかあります。