無效的mapStateToProps React-Redux中的參數

我正面臨mapStateToProps參數的問題。這似乎是一個非常簡單的錯誤，但我無法弄清楚發生了什麼。基本上，我試圖做的是切換一個側邊欄菜單react-redux和反應傳奇。一切正常，但我發現了以下錯誤：無效的mapStateToProps React-Redux中的參數

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'), 
);

減速

（Index）app/redurs/index.js

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

const rootReducer = combineReducers({ 
    sidebar, 
}); 

export default rootReducer;

（側欄）的應用程序/減速器/ 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應用程序/傳奇/ index.js

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

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

export default rootSaga;

sidebar.js應用/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;

來源

2017-07-03 Pablo Darde

哎@AndrewLi，我嘗試，但它不工作。我相信不，因爲我的reducer已經返回一個布爾值。謝謝。 –

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

請嘗試，通過mapStateToProps和mapDispatchToProps作爲參數，而不是一個對象。

connect是一個期望狀態和調度函數的函數。

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

來源

2017-07-03 13:22:16

嘿，真是恥辱，嘿嘿，很簡單的基本錯誤。非常感謝您的幫助！！ –

很酷。謝謝：） –

無效的mapStateToProps React-Redux中的參數

回答

相關問題