微网站建设费用,wordpress cpu 100%,稳定免费虚拟主机,百度集团总部在哪里React 基础巩固(三十三)——Redux的使用详解
Redux的使用详解 针对React 基础巩固#xff08;三十二#xff09;中的案例#xff0c;我们希望抽取页面中共有的代码#xff08;例如下方的代码#xff09;#xff0c;使用高阶组件统一拦截。 constructor() {super();this.…React 基础巩固(三十三)——Redux的使用详解
Redux的使用详解 针对React 基础巩固三十二中的案例我们希望抽取页面中共有的代码例如下方的代码使用高阶组件统一拦截。 constructor() {super();this.state {counter: store.getState().counter,};
}
componentDidMount() {store.subscribe(() {const state store.getState();this.setState({counter: state.counter,});});
}为了让react和redux产生联系安装一款工具react-redux npm install react-redux使用react-redux 在index.js中统一注入store import React from react;
import ReactDOM from react-dom/client;
import App from ./App;
import { Provider } from react-redux;
import store from ./storeconst root ReactDOM.createRoot(document.getElementById(root));
root.render(React.StrictModeProvider store{store}App //Provider
/React.StrictMode
); 新建about.js页面通过react-redux引入store import React, { PureComponent } from react;
import { connect } from react-redux;export class about extends PureComponent {render() {const { counter } this.props;return (divdivAbout: {counter}/div/div);}
}// connect()的返回值是一个高阶函数
const mapStateToProps (state) ({counter: state.counter,
});export default connect(mapStateToProps)(about); 在App.jsx中引入新的about.jsx页面查看运行效果 import React, { PureComponent } from react;
import Home from ./pages/home;
import Profile from ./pages/profile;
import About from ./pages/about;
import ./style.css;
import store from ./store;export class App extends PureComponent {constructor() {super();this.state {counter: store.getState().counter,};}componentDidMount() {store.subscribe(() {const state store.getState();this.setState({counter: state.counter,});});}render() {const { counter } this.state;return (divh2App Counter: {counter}/h2div classNamepagesHome /Profile /About //div/div);}
}export default App; 6. 继续优化代码利用react-redux中的connect对state和dispatch进行解耦。在基础巩固三二中的home.jsx页面中state和dispatch如下表示
import React, { PureComponent } from react;
import store from ../store;
import { addNumberAction } from ../store/actionCreators;
export class home extends PureComponent {constructor() {super();this.state {counter: store.getState().counter,};}componentDidMount() {store.subscribe(() {const state store.getState();this.setState({counter: state.counter,});});}addNumber(num) {store.dispatch(addNumberAction(num));}render() {const { counter } this.state;return (divhome counter:{counter}divbutton onClick{(e) this.addNumber(1)}1/buttonbutton onClick{(e) this.addNumber(5)}5/buttonbutton onClick{(e) this.addNumber(8)}8/button/div/div);}
}export default home;
为了将页面与store解耦在about.jsx中我们不再使用home.jsx的方式使用state和dispatch优化如下
import React, { PureComponent } from react;
import { connect } from react-redux;
import { addNumberAction, subNumberAction } from ../store/actionCreators;export class about extends PureComponent {calcNumber(num, isAdd) {if (isAdd) {this.props.addNumber(num);} else {this.props.subNumber(num);}}render() {const { counter } this.props;return (divh2About: {counter}/h2divbutton onClick{(e) this.calcNumber(6, true)}6/buttonbutton onClick{(e) this.calcNumber(6, false)}-6/buttonbutton onClick{(e) this.calcNumber(8, true)}8/buttonbutton onClick{(e) this.calcNumber(8, false)}-8/button/div/div);}
}// connect()的返回值是一个高阶函数
// 映射state到props
const mapStateToProps (state) ({counter: state.counter,
});// 映射dispatch到props
const mapDispatchToProps (dispatch) ({addNumber(num) {dispatch(addNumberAction(num));},subNumber(num) {dispatch(subNumberAction(num));},
});export default connect(mapStateToProps, mapDispatchToProps)(about);
查看运行结果
