React全家桶-01-Redux的流程和具体使用：

首先还是创建项目，需要安装antd以及redux来初始化项目，方便下面的学习

1.redux中的⻆⾊

• 🚀 Store：

  • 用于维持应⽤的 state；
  • createStore()创建一个store；
  • 提供 getState() ⽅法获取 state；
  • 提供 dispatch(action) ⽅法更新 state；
  • 通过 subscribe(listener) 注册监听器;
  • 通过 subscribe(listener) 返回的函数注销监听器。

• 🚀 Reducer：

  • 指定了应⽤状态的变化如何响应 actions 并发送到store的

• 🚀Action：

  • 把数据从应⽤传到store的有效载荷

2.redux例子:

目录结构:

src
├─App.css
├─App.js
├─index.css
├─index.js
├─logo.svg
├─store
|   └index.js
├─Components
|     └ReduxTest.js

代码如下👇：

🚀 store 中的 index.js：

• 创建了reducer来处理具体地操作
• 将reducer纯函数作为参数传递给createStore()
• 导出 store；

// 🚀 src/store/index.js

import {createStore} from "redux";

//创建reducer
function conter(state=0,action){
    switch (action.type){
        case "INCREMENT":
            return state + 1;
        case "DECREMENT":
            return state - 1;
        default:
            return state;
    }
}

//创建store
const store = createStore(conter);
export default store;

🚀 src中的 index.js:

• 创建一个render函数用于渲染
• 将 render 渲染函数作为参数传递给 store.subscribe(render)
  • 这样如果 stroe 中的state有变化的，那么就会执行render函数完成重新渲染，更新页面视图

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import store from "./store";
import ReduxTest from "./Components/ReduxTest";

function render(){
    ReactDOM.render(
            <ReduxTest/>,
        document.getElementById('root')
    );
}
render();
// 🚀注册 订阅 每次state更新时，就重新的render
store.subscribe(render)

🚀 ReduxTest.js：

• store.getState()获取redux中的state - store.dispatch()派发一个action
• store拿到了这个action连同之前的state一起给到了reducer中
• reducer跟去action.type做处理后返回一个新的state给store
• store更新页面数据

// Components/ReduxTest.js

import React, {Component} from 'react';
import store from "../store";
import {Button} from "antd";
class ReduxTest extends Component {
    constructor(props) {
        super(props);
        this.increment = this.increment.bind(this);
        this.decrement = this.decrement.bind(this);
    }
    increment(){
        store.dispatch({type:"INCREMENT"})
    }
    decrement(){
        store.dispatch({type:"DECREMENT"})
    }
    render() {
        return (
            <div>
                <p>{store.getState()}</p>
                <Button type="success" onClick={this.increment}> + 1 </Button>
                <Button type="primary" onClick={this.decrement}> - 1 </Button>
            </div>
        );
    }
}

export default ReduxTest;

Redux架构的设计核⼼：严格的单向数据流

问题:每次state更新，都会重新render，⼤型应⽤中会造成不必要的重复渲染。

如果想要更优雅的使用redux，那么建议使用react-redux