無効なmapStateToProps引数：React-Redux

Question

私はmapStateToProps引数の問題に直面しています。それは非常に単純なエラーのようですが、私は何が起こっているのか理解できません。基本的には、私がやろうとしているのは、サイドバーメニューを反応還元型と反応させることです。すべてがうまく動作しますが、私は次のエラーを取得しています：

Uncaught Error: Invalid value of type object for mapStateToProps argument when connecting component Sidebar.

は、任意の助けに感謝：

インデックスのアプリ/のJS/index.js

import React from 'react'; 
import { render } from 'react-dom'; 
import { Provider } from 'react-redux'; 
import configureStore from '../store/configureStore'; 
import Canvas from '../components/Canvas/Canvas'; 

const store = configureStore(); 

render(
    <Provider store={store}> 
    <Canvas /> 
    </Provider>, 
    document.getElementById('app'), 
); 

レデューサー

（インデックス）app/reducers/index.js

アプリsidebar.js

import { combineReducers } from 'redux'; 
import sidebar from './sidebar'; 

const rootReducer = combineReducers({ 
    sidebar, 
}); 

export default rootReducer; 

（サイドバー）APP /減速/ sidebar.js

import { 
    TOGGLE_SIDEBAR, 
} from '../actions'; 

const sidebar = (state = { value: true }, action) => { 
    switch (action.type) { 
    case TOGGLE_SIDEBAR: 
     debugger; 
     return action.value; 
    default: 
     debugger; 
     return state.value; 
    } 
} 

export default sidebar; 

サガ

index.js APP /サーガ/ index.js

import { fork } from 'redux-saga/effects'; 
import { watcher } from './watcher'; 

function* rootSaga() { 
    yield [ 
    fork(watcher), 
    ]; 
} 

export default rootSaga; 

/sagas/sidebar.js

import { put } from 'redux-saga/effects'; 
import { 
    TOGGLE_SIDEBAR, 
} from '../actions'; 

export function* sidebar() { 
    try { 
    yield put ({ type: TOGGLE_SIDEBAR }); 
    } catch (err) { 
    debugger; 
    } 
} 

watcher.jsアプリ/サガ/ watcher.js

import { takeEvery } from 'redux-saga/effects'; 
import { sidebar } from './sidebar'; 
import { 
    TOGGLE_SIDEBAR, 
} from '../actions'; 

export function* watcher() { 
    try { 
    yield takeEvery(TOGGLE_SIDEBAR, sidebar); 
    } catch (err) { debugger; } 
} 

アクションアプリ/アクション/ index.js

export const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR'; 

export const toggleSidebar = (value) => ({ 
    type: TOGGLE_SIDEBAR, 
    value, 
}); 

コンテナ SidebarContainer.jsアプリ/コンテナ/ sidebarContainer.js

import { connect } from 'react-redux'; 
import { 
    toggleSidebar as callToggleSidebar, 
} from '../actions'; 
import Sidebar from '../components/Sidebar/Sidebar'; 

debugger; 
const mapStateToProps = (state) => { 
    debugger; 
    return { 
    open: state.sidebar, 
    } 
}; 

const mapDispatchToProps = dispatch => ({ 
    toggleSidebar: (val) => { dispatch(callToggleSidebar(val)); }, 
}); 

export default connect({ 
    mapStateToProps, 
    mapDispatchToProps, 
})(Sidebar); 

コンポーネント

Sidebar.jsxアプリ/コンポーネント/ Sidebar.jsx

import React from 'react'; 
import { PropTypes } from 'prop-types'; 
import './styles/styles.less'; 

const Sidebar = ({ open, toggleSidebar }) => (
    <div className={open ? 'sidebar sidebar-open' : 'sidebar sidebar-closed'}> 
    <div className='show-hide-container'> 
     <button onClick={() => toggleSidebar(!open)}> 
     <i className="fa fa-arrow-right" aria-hidden="true" /> 
     </button> 
    </div> 
    Sidebar 
    </div> 
); 

Sidebar.propTypes = { 
    open: PropTypes.bool.isRequired, 
    toggleSidebar: PropTypes.func.isRequired, 
}; 

export default Sidebar; 

Answer 1

export default connect(
    mapStateToProps, 
    mapDispatchToProps, 
)(Sidebar); 

代わりに、オブジェクトの引数としてmapStateToPropsとmapDispatchToPropsを渡して、試してみてください。

connectは、状態およびディスパッチ機能を期待する機能です。

https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options