web-dev-qa-db-ja.com

reduxアクションはプレーンオブジェクトでなければなりませんが、プレーンオブジェクトを定義しました

redux + reactを使用してWebサイトを構築し、reduxを使用して表示されるサイドバーを制御したい。サイドバーはsemantic-ui-reactによって定義されている。別のコンポーネント間でそれを制御するために、サイドバーの親コンポーネントでpropsを定義しましたconst { visible, dispatch } = this.props、これを処理するonClick関数があります。コードを表示します。

キャッチされないエラー：アクションはプレーンオブジェクトである必要があります。非同期アクションにはカスタムミドルウェアを使用します。

このエラーはある日の午後私を混乱させました、そして私は理由がわかりません！これは私のアクションコードです：

**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>
        )
    }
}

だから、私はこのエラーの答えを探します、彼らのほとんどはあなたがそれを使うためにApplyMiddlewareでredux-thunkをセットアップしなければならないと言います、しかし私が定義したアクションはプレーンオブジェクト。redux-thunkを使用しない場合、このエラーも発生しないと思います。それで、私は非常に混乱しています、これを解決する方法は？

すべての助けをありがとう

javascriptreactjsreduxreact-reduxredux-thunk
6
g1eny0ung

ここに：

dispatch(sidebarVisibleAction)

関数sidebarVisibleActionをdispachに渡しています。それを呼び出して結果を渡す必要があるため、コードは次のようになります。

dispatch(sidebarVisibleAction())

（現在、dispatchは関数ではなくオブジェクトを取得します）。

23
Marcin Sucharski