-1

我正在使用 reactjs。节点：版本 14

我正在开发 core-ui-react-template。

更新 ./store 文件后，侧边栏不起作用。我把 store 文件和 index.js 文件的内容放在下面。

原始网站 core.io 我已经研究了几天，但没有得到任何结果。我找不到错误在哪里

core-ui-react-template SIDEBAR 不工作

index.js

import 'react-app-polyfill/ie11'; // For IE 11 support
import 'react-app-polyfill/stable';
import './polyfill'
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { icons } from './assets/icons'
import store from './store'
import { transitions, positions, Provider as AlertProvider } from 'react-alert'
import AlertTemplate from 'react-alert-template-basic'
import {Provider} from 'react-redux';
import ReactNotification from 'react-notifications-component';
import 'react-notifications-component/dist/theme.css'

React.icons = icons;

const options = {
  position: positions.BOTTOM_RIGHT,
  timeout: 5000,
  offset: '1px',
  transition: transitions.SCALE,
};

console.log(store.getState());

ReactDOM.render(
  <Provider store={store}>

      <AlertProvider template={AlertTemplate} {...options}>

        <ReactNotification/>
        <App/>

      </AlertProvider>
  </Provider>,
  document.getElementById('root')
);
serviceWorker.unregister();

./store.js

import {applyMiddleware, combineReducers, compose, createStore} from "redux";
import customerReducer from "./components/helpers/reducers/customerReducer";
import userReducer from "./components/helpers/reducers/userReducer";
import appointmentsReducer from "./components/helpers/reducers/appointmenstReducer";
import thunk from "redux-thunk";


const initialState = {
  sidebarShow: 'responsive'
};

const changeStateReducer = (state = initialState, { type, ...rest }) => {
  switch (type) {
    case 'set':
      return {...state, ...rest };
    default:
      return state
  }
};
const rootReducers = combineReducers({
  customerInfo: customerReducer,
  account_profile: userReducer,
  appointmentsList: appointmentsReducer,
  changeState: changeStateReducer
});
const allEnhancers = compose(
  applyMiddleware(thunk)
);
const store = createStore(
  rootReducers,
  allEnhancers
);
export default store

如您所知，我使用 core-ui-react 模板。下面有一个链接。但是在更新 ./store 文件后，当我在 TheHeader 文件的“ const sidebarShow = useSelector (state => state.sidebarShow) ”行中使用 console.log (sidebarShow) 显示它时，它显示“未定义” 。

https://github.com/coreui/coreui-free-react-admin-template/blob/master/src/containers/TheHeader.js

我认为“ useSelector (state => state.sidebarShow) ”在这里没有得到这个功能。它起源于这里。

4

1 回答 1

3

查看 combineReducers 的工作原理：https ://redux.js.org/api/combinereducers

你的选择器应该是：

const sidebarShow = useSelector(state => state.changeState.sidebarShow)

您会注意到这changeState不是一个很好的键名，但这是另一个问题 :)

于 2020-06-30T09:25:37.070 回答