react：Redux与 React-Redux状态变更自动刷新

创建 store 文件夹 ，并创建文件 store.js 内容演示如下：

//创建 store 存储所有的数据
 
import { createStore } from 'redux';
 
//定义 state 初始化和修改规则
 
function counterReducer(state=0,action) {
    // console.log("当前的state",state);
    switch (action.type) {
        case "ADD":
            return state + 1;
        case "MINUS":
            return state - 1;
        default:
            return state;
    }
}
 
const store = createStore(counterReducer);
 
export default store;

相应的逻辑参数可以根据你的实际业务进行变更。

组件内调用演示：

import React, {Component} from 'react';
 
//引入store
import store from "../../store";
 
 
 
class Index extends Component {
 
    //subscrib 订阅、监听：每当数据发生改变的时候，重新渲染
 
    componentDidMount() {
        //组件已经挂载完成之后
        store.subscribe(() => {
            console.log("state已经发生改变了");
            //页面更新的方法有三种，其一强制刷新--this.forceUpdate();
            this.forceUpdate();
        })
    }
 
    render() {
        console.log("store",store);
        return (
            <div>
                <h3>redux 案例</h3>
 
                {/*    我想显示store里面的东西--store.getState()*/}
                <p>{store.getState()}</p>
 
                {/*其实这里点击增加后，state里面的数据已经改变了，只是没有重新渲染*/}
                <button onClick={()=>store.dispatch({type:"ADD"})}>add</button>
               
            </div>
        );
    }
}
 
export default Index;

状态继承演示：

import React from 'react';
import Home from "./pages/Home/index";
import * as ReactDOM from "react-dom";
 
//（只一次）引入store
import store from "./store";
import { Provider } from 'react-redux';
 
 
ReactDOM.render(
    <Provider store={store}>
        <Home/>
    </Provider>,
    document.getElementById('root')
);

另一个组件，要继承上面组件的 store：

import React, {Component} from 'react';
 
//引入connect：为子组件提供拿到 store 里面的东西
import { connect } from "react-redux";
 
 
class B extends Component {
 
    render() {
 
        // console.log("props上面",this.props);
        const {num,dispatch,add,minus} = this.props;
 
        return (
            <div>
                <h3>子组件怎么获取到store里面的东西？？？？</h3>
                <p>{num}</p>
                <button onClick={add}>add</button>
                <button onClick={minus}>minus</button>
            </div>
        );
    }
}
 
//connect(第一个参数：)(第二个参数：组件)
 
export default connect(
 
    //mapStateToProps 把 state 映射到 props
    state => ({num:state}),
 
    //mapDispatchToProps 把 dispatch 映射到 props
    {
        add: () => ({type: "ADD"}),
        minus: () => ({type: "MINUS"})
    }
)(B);