Redux действие должно быть простыми объектами, но я определил простой объект

Question

Я использую Redux + реагирующие построить свой веб-сайт, и я хочу использовать Redux для управления боковой панели visible.The боковой панель определяются семантическим-интерфейс реагирует .Потому что я хочу управлять им по другому компоненту, поэтому я определил реквизиты в родительском компоненте боковой панели const { visible, dispatch } = this.props, есть функция onClick, чтобы справиться с этим. Я покажу свой код.

Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.

Эта ошибка смутила меня однажды днем, и я не знаю почему! Это мой код действия:

**action** 

export const SIDEBARISVISIBLE = 'sidebarVisible' 

export function sidebarVisibleAction() { 
    return { type: SIDEBARISVISIBLE } 
} 

Как вы можете видеть, я определил, что создатель действия возвратил простой объект.

И это мой редуктор код:

**reducer** 

import SIDEBARISVISIBLE from '../actions/outside.js' 

function sidebarVisible(state = { 
    sidebarIsVisible: false 
}, action) { 

    switch (action.type) { 
     case SIDEBARISVISIBLE: 
      return Object.assign({}, state, { 
       sidebarIsVisible: !state.sidebarIsVisible 
      }) 
     default: 
      return state 
    } 
} 

export default sidebarVisible 

Также мой магазин код:

**store** 

import { createStore, applyMiddleware, compose } from 'redux' 
import thunk from 'redux-thunk' 
import sidebarVisible from '../reducers/outside.js' 

export default initialState => { 
    return createStore(
    sidebarVisible, 
    initialState, 
    applyMiddleware(thunk) 
) 
} 

Тогда мой код компонента (часть):

class OutsideView extends Component { 

    constructor(props) { 
     super(props) 
     this.state = { activeItem: '' } 
    } 

    handleItemClick = (e, { name }) => this.setState({ activeItem: name }) 

    render() { 
     const { activeItem } = this.state 
     const { visible, dispatch } = this.props 

     return (
      <div> 
       <SidebarNav visible={ visible } /> 

       ...... 

        <Menu.Item 
        name='sidebar' 
        active={ activeItem === 'sidebar'} 
        onClick={ (e, {name}) => { 
           this.setState({ activeItem: name }) 
           dispatch(sidebarVisibleAction) 
          } }> 
        <Icon color='red' name='list' /> 
       </Menu.Item> 

OutsideView.PropTypes = { 
    visible: PropTypes.bool.isRequired, 
    dispatch: PropTypes.func.isRequired 
} 

function mapStateToProps(state) { 
    return { 
    visible: state.sidebarIsVisible, 
    } 
} 

export default connect(
    mapStateToProps 
)(OutsideView) 

Последнее, мой Маршрутизатор:

import configureStore from './store/index.js' 
const store = configureStore() 

export default class Root extends Component { 

    render() { 
     return (
      <Provider store={ store }> 
      <Router history={ browserHistory }> 
       <Route path="/" component={ OutsideRedux }> 
        <Route path='register' component={ Register } /> 
        <Route path='login' component={ Login } /> 
        <Route path='blog' component={ Blog } /> 
        <Route path='about' component={ About } /> 
        <Route path='home' component={ Home } /> 
        <Route path='ask' component={ Ask } /> 
        <Route path='panel' component={ Panel } /> 
        <Route path='setting' component={ Setting } /> 
        <Route path='user' component={ User } /> 
       </Route> 
      </Router> 
      </Provider> 
     ) 
    } 
} 

Итак, я ищу ответ на эту ошибку, большинство из них говорит, вы должны установить Redux-стук и с ApplyMiddleware использовать его, самое простое way.But действия я определил это обычного объект .Ело Я не использую redux-thunk, я думаю, что я тоже не буду сталкиваться с этой ошибкой. Итак, я очень смущен, как это решить?

Спасибо за помощь

Answer 1

Здесь:

dispatch(sidebarVisibleAction)

вы передаете функцию sidebarVisibleAction к dispach. Вы должны вызвать его и передать результат, так что код будет выглядеть следующим образом:

dispatch(sidebarVisibleAction())

(теперь dispatch получит объект, а не функция).