reactjs - 商店更新后边栏不工作
reactjs - sidebar not working after store update
我正在使用 reactjs。
节点:版本 14
我正在开发 core-ui-react-template.
更新 ./store 文件后边栏无法使用。我把商店文件和index.js文件的内容放在下面。
原网站core.io
我已经为此工作了几天,但我无法得到任何结果。找不到哪里错了
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 模板。下面有个link。
但是更新 ./store 文件后,当我在“const sidebarShow = useSelector (state => state.sidebarShow)[= TheHeader 文件中的 38=]" 行。
https://github.com/coreui/coreui-free-react-admin-template/blob/master/src/containers/TheHeader.js
我认为“useSelector (state => state.sidebarShow)”在这里没有得到函数。起源于此。
查看 combineReducers 的工作原理:https://redux.js.org/api/combinereducers
您的选择器应该是:
const sidebarShow = useSelector(state => state.changeState.sidebarShow)
您会注意到 changeState
不是一个很好的键名,但这是另一个问题:)
我正在使用 reactjs。 节点:版本 14
我正在开发 core-ui-react-template.
更新 ./store 文件后边栏无法使用。我把商店文件和index.js文件的内容放在下面。
原网站core.io 我已经为此工作了几天,但我无法得到任何结果。找不到哪里错了
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 模板。下面有个link。 但是更新 ./store 文件后,当我在“const sidebarShow = useSelector (state => state.sidebarShow)[= TheHeader 文件中的 38=]" 行。
https://github.com/coreui/coreui-free-react-admin-template/blob/master/src/containers/TheHeader.js
我认为“useSelector (state => state.sidebarShow)”在这里没有得到函数。起源于此。
查看 combineReducers 的工作原理:https://redux.js.org/api/combinereducers
您的选择器应该是:
const sidebarShow = useSelector(state => state.changeState.sidebarShow)
您会注意到 changeState
不是一个很好的键名,但这是另一个问题:)