Reactjs React Redux中的mapStateToProps参数无效

我在MapStateTops参数中遇到问题。这似乎是一个非常简单的错误，但我不知道发生了什么。基本上，我要做的是用react-redux和react-saga切换侧栏菜单。一切正常，但我发现以下错误：

未捕获错误：连接组件侧栏时MapStateTops参数的object类型值无效

感谢您的帮助：

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

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

const rootReducer = combineReducers({
  sidebar,
});

export default rootReducer;

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

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

export default rootSaga;

export const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR';

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

（侧栏）app/reducers/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;

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

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

传奇

index.js app/sagas/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'),
);

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

const rootReducer = combineReducers({
  sidebar,
});

export default rootReducer;

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

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

export default rootSaga;

export const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR';

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

sidebar.js app/sagas/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;

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 app/sagas/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; }
}

操作app/Actions/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'),
);

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

const rootReducer = combineReducers({
  sidebar,
});

export default rootReducer;

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

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

export default rootSaga;

export const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR';

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

容器SidebarContainer.js应用程序/Containers/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;

从“React”导入React；
从“属性类型”导入{PropTypes}；
导入“./styles/styles.less”；
常量边栏=（{open，toggleSidebar}）=>(
切换侧边栏（！打开）}>
边栏
);
侧栏.propTypes={
打开：PropTypes.bool.isRequired，
toggleSidebar:PropTypes.func.isRequired，
};
导出默认边栏；

请尝试将

MapStateTrops

和

mapDispatchToProps

作为参数而不是对象传递

connect

是一个需要状态和分派函数的函数

---

嘿@AndrewLi，我试过了，但没用。我相信没有，因为我的减缩器已经返回布尔值。谢谢。嘿，伙计，真可惜，呵呵，非常简单的基本错误。非常感谢你的帮助！！酷。谢谢：）b的儿子……我花了一个小时才找到这个。谢谢