解决React数据管理(状态管理)，用于中大型，数据比较庞大，组件之间数据交互多的情
况下使用。如果你不知道是否需要使用Redux，那么你就不需要用它!

• 解决组件的数据通信。
• 解决数据和交互较多的应用

Redux只是一种状态管理的解决方案!

Store:数据仓库，保存数据的地方。
State:state是1个对象，数据仓库里的所有数据都放到1个state里。
Action:1个动作，触发数据改变的方法。
Dispatch:将动作触发成方法
Reducer:是1个函数，通过获取动作，改变数据，生成1个新state。从而改变页面

下载安装

npm install redux --save

创建仓库(src/store/index.js)

import {createStore} from 'redux';

// 初始化数据
const intialState={
    num:1
}

// 通过动作，创建新的state
const reducer=(state={    //state的默认值
    ...intialState
},action)=>{              //通过调用store.dispatch({type:'add'})，可使state.num自增
    console.log(action)
    switch (action.type){
        case 'add':
            state.num++;
            break;
        case 'decrement':
            state.num--;
            break;
        default:
            break;
    }
    // 返回一个新的对象（修改过后的）
    return {...state};   //旧版本
    // return state   //新版本
}

// 创建仓库
const store=createStore(reducer)

export default store

在组件中使用redux(引入store)

import React from 'react';
import store from '../store'
const Mine = () => {
    // console.log(store.getState())
    let state=store.getState()   //store.getState()获取state里的数据
    return (
        <div>
            <p>{state.num}</p>
            <button onClick={()=>{store.dispatch({type:'add',params:123})}}>加</button>
            <button onClick={()=>{store.dispatch({type:'decrement'})}}>减</button>
        </div>
    );
}
export default Mine;

修改state中num的数据并不会自动更新页面需要重新调用ReactDom.render函数重新渲染

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from './store/index'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// 监听数据变化重新渲染
store.subscribe(()=>{
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );
})
reportWebVitals();