problem description
redux modifies state related components but does not update
the environmental background of the problems and what methods you have tried
related codes
/ / Please paste the code text below (do not replace the code with pictures)
//redux.js
let initState = {
toggle: false,
}
export function counter(state=initState, action) {
let stateCopy = {...state}
switch (action.type) {
case toggle:
stateCopy.toggle?stateCopy.toggle=false:stateCopy.toggle=true;
return stateCopy;
default:
//
return stateCopy;
}
}
//action creator action
export function toggle() {
return {type:toggle}
}//index.js
import Siderbar from "./pages/layout/sidebar";
import { createStore } from "redux";
import {counter,open,close,toggle} from "./redux";
import "./App.css";
const store = createStore(counter);
console.log(store.getState(),"store")
ReactDOM.render(
<Router>
<div className="wrapper">
<div className="siderbar"><Siderbar store={store}/></div>
<div className="main">
<div className="header"><Header store={store} toggle={toggle}/></div>
<div className="content">
<Route path="/page1" component={Page1} />
<Route path="/page2" component={Page2} />
</div>
</div>
</div>
</Router>, document.getElementById("root"));//header.js
import React from "react";
class Header extends React.Component{
render(){
const store = this.props.store;
const isCollopse = store.getState();
const toggle = this.props.toggle;
console.log(isCollopse,"isCollopse")
console.log(this.props,"this.props")
return(
<div onClick={() => {store.dispatch(toggle());console.log(store.getState().toggle)}}></div>
// <div></div>
);
}
}
export default Header;//siderbar.js
render() {
const store = this.props.store;
let toggle = store.getState().toggle;
console.log(store.getState(),"111")
return (
<div style={{ maxWidth: 256 }}>
{/* <Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>
<Icon type={this.state.collapsed ? "menu-unfold" : "menu-fold"} />
</Button> */}
<Menu
defaultSelectedKeys={["1"]}
defaultOpenKeys={["sub1"]}
mode="inline"
theme="dark"
inlineCollapsed={toggle}
>what result do you expect? What is the error message actually seen?
expected result: click header to change state"s toggle to control the contraction of siderbar
error: state has changed but the status of siderbar has not been updated
