紧接着上一篇 React-Redux-综合运用(在React中使用) 的内容，本文主要介绍的是 Redux 在其它组件当中的使用以及注意点，在 src 目录下创建一个 component 目录在目录当中创建一个 home 与 about 组件，里面的内容是基于 app.js 进行参考得到的如下：
- Home.js
import React from 'react';
import store from '../store/store';
import {addAction} from '../store/action';
class Home extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
count: store.getState().count
}
}
componentDidMount() {
store.subscribe(() => {
this.setState({
count: store.getState().count
})
})
}
componentWillUnmount() {
store.unsubscribe();
}
render() {
return (
<div>
<p>{this.state.count}</p>
<button onClick={() => {
this.btnClick()
}}>递增
</button>
</div>
)
}
btnClick() {
store.dispatch(addAction(1));
}
}
export default Home;
- About.js
import React from 'react';
import store from '../store/store';
import {subAction} from '../store/action';
class About extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
count: store.getState().count
}
}
componentDidMount() {
store.subscribe(() => {
this.setState({
count: store.getState().count
})
})
}
componentWillUnmount() {
store.unsubscribe();
}
render() {
return (
<div>
<p>{this.state.count}</p>
<button onClick={() => {
this.btnClick()
}}>递减
</button>
</div>
)
}
btnClick() {
store.dispatch(subAction(1));
}
}
export default About;
- App.js
import React from 'react';
import store from './store/store';
import {addAction} from './store/action';
import Home from './components/Home';
import About from './components/About';
class App extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
count: store.getState().count
}
}
componentDidMount() {
store.subscribe(() => {
this.setState({
count: store.getState().count
})
})
}
componentWillUnmount() {
store.unsubscribe();
}
render() {
return (
<div>
<p>{this.state.count}</p>
<button onClick={() => {
this.btnClick()
}}>
增加
</button>
<Home/>
<About/>
</div>
)
}
btnClick() {
store.dispatch(addAction(5));
}
}
export default App;
- 测试结果：
经过如上的一顿操作过后，发现代码存在的问题，就是重复代码过多，不利于维护，还有其它的一些问题，这里先不列举在下一篇文章，博主会全部统一一一进行介绍，当然还可以引出一个新的知识点。
