title: redux Actions must be plain objects but I defined plain object
body: <p>I use <strong>redux</strong> + <strong>react</strong> to build my website, and I want to use redux to control a sidebar visible.The sidebar is defined by semantic-ui-react.Because I want to control it across another component, so I defined the <strong>props</strong> in sidebar's parent component <code>const { visible, dispatch } = this.props</code>, there is a <strong>onClick</strong> function to handle this. I will show my code.</p>
  
  <blockquote>
    <p>Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.</p>
  </blockquote>
  
  <p>This error confused me one afternoon, and I don't know why! This is my action code:</p>
  
  <pre><code>**action**
  
  export const SIDEBARISVISIBLE = 'sidebarVisible'
  
  export function sidebarVisibleAction() {
    return { type: SIDEBARISVISIBLE }
  }
  </code></pre>
  
  <p>As you can see, I defined an action creator returned a plain object.</p>
  
  <p>And this is my reducer code:</p>
  
  <pre><code>**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
  </code></pre>
  
  <p>Also my store code:</p>
  
  <pre><code>**store**
  
  import { createStore, applyMiddleware, compose } from 'redux'
  import thunk from 'redux-thunk'
  import sidebarVisible from '../reducers/outside.js'
  
  export default initialState =&gt; {
    return createStore(
      sidebarVisible,
      initialState,
      applyMiddleware(thunk)
    )
  }
  </code></pre>
  
  <p>Then, my component code(part of):</p>
  
  <pre><code>class OutsideView extends Component {
  
      constructor(props) {
          super(props)
          this.state = { activeItem: '' }
      }
  
      handleItemClick = (e, { name }) =&gt; this.setState({ activeItem: name })
  
      render() {
          const { activeItem } = this.state
          const { visible, dispatch } = this.props
  
          return (
              &lt;div&gt;
                  &lt;SidebarNav visible={ visible } /&gt;
  
                  ......
  
                     &lt;Menu.Item
                      name='sidebar'
                      active={ activeItem === 'sidebar'}
                      onClick={ (e, {name}) =&gt; {
                                  this.setState({ activeItem: name })
                                  dispatch(sidebarVisibleAction)
                              } }&gt;
                      &lt;Icon color='red' name='list' /&gt;
                  &lt;/Menu.Item&gt;
  
  OutsideView.PropTypes = {
      visible: PropTypes.bool.isRequired,
      dispatch: PropTypes.func.isRequired
  }
  
  function mapStateToProps(state) {
    return {
      visible: state.sidebarIsVisible,
    }
  }
  
  export default connect(
      mapStateToProps
  )(OutsideView)
  </code></pre>
  
  <p>The last, my Router:</p>
  
  <pre><code>import configureStore from './store/index.js'
  const store = configureStore()
  
  export default class Root extends Component {
  
      render() {
          return (
              &lt;Provider store={ store }&gt;
              &lt;Router history={ browserHistory }&gt;
                  &lt;Route path="/" component={ OutsideRedux }&gt;
                      &lt;Route path='register' component={ Register } /&gt;
                      &lt;Route path='login' component={ Login } /&gt;
                      &lt;Route path='blog' component={ Blog } /&gt;
                      &lt;Route path='about' component={ About } /&gt;
                      &lt;Route path='home' component={ Home } /&gt;
                      &lt;Route path='ask' component={ Ask } /&gt;
                      &lt;Route path='panel' component={ Panel } /&gt;
                      &lt;Route path='setting' component={ Setting } /&gt;
                      &lt;Route path='user' component={ User } /&gt;
                  &lt;/Route&gt;
              &lt;/Router&gt;
              &lt;/Provider&gt;
          )
      }
  }
  </code></pre>
  
  <p>So, I search for answer for this error, most of them say, you have to setup redux-thunk and with <strong>ApplyMiddleware</strong> to use it, the simplest way.But the action I defined is <strong>plain object</strong>.If I don't use redux-thunk, I think I will not encounter this error either.So, I'm very confused, how to solve this?</p>
  
  <p>Thanks for all the help</p>