React-Redux-其它组件中使用

紧接着上一篇 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;

• 测试结果：

经过如上的一顿操作过后，发现代码存在的问题，就是重复代码过多，不利于维护，还有其它的一些问题，这里先不列举在下一篇文章，博主会全部统一一一进行介绍，当然还可以引出一个新的知识点。