使用React在Redux中沒有將操作傳遞給Reducer

我正在編寫一個代碼來使用redux應用主題。這裏是我的代碼：使用React在Redux中沒有將操作傳遞給Reducer

操作/ index.js

export const CHANGE_THEME = 'CHANGE_THEME'; 

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

減速/ index.js

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();

，我會在操作的控制檯日誌，但不是一個減速機（我上啓動時減速的測試日誌）。我究竟做錯了什麼？

來源

2017-10-05 tariq zafar

你在哪裏創建了商店 –

你如何設置你的商店？你已經「合併」了你的減速器，但你還沒有聯繫到商店。

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組件一樣訪問商店狀態。

您可以在React documentation的Redux綁定中找到有關Provider組件的更多信息。

一旦您對此感到滿意，我會建議您瀏覽Dan Abramov的優秀course on idiomatic Redux，其中提到了您可以使用商店和商店狀態在首批視頻中執行的一些技巧。

來源

2017-10-05 07:17:44 gkats

我已經做到了。忘了粘貼它。請檢查。 –

控制檯中是否有錯誤？你確定你正在合併減速器嗎？ 'combineReducers'函數需要一個對象。在你的情況下，它必須是'combineReducers（{themeHandler}）'，以便在'themeHandler'鍵下可以訪問狀態。以下代碼適用於我：https://gist.github.com/gkats/ad67323bc887c94d63982746bdbceed4 – gkats

問題是我正在使用Admin-On-Rest框架，並且必須將減法器添加到Admin組件。一旦我做到了，它的工作。感謝您的幫助 –

使用React在Redux中沒有將操作傳遞給Reducer

回答

相關問題