使用 React 在 Redux 中未将操作传递给 Reducer

Question

我正在编写代码以使用 redux 应用主题。 这是我的代码：

Actions/index.js

export const CHANGE_THEME = 'CHANGE_THEME';

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

reducers/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

事件正在使用 Menu/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();

我只是在操作中获得控制台日志，而不是在减速器中的那个（我在启动时获得减速器的测试日志）。我做错了什么？

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 组件中一样访问存储状态。

您可以在 React documentation 的 Redux 绑定中找到有关 Provider 组件的更多信息。

一旦您对此感到满意，我建议您阅读 Dan Abramov 的出色 course on idiomatic Redux，其中提到了您可以在第一个视频中对商店和商店状态执行的一些技巧。