Redux以及Flux介绍

Flux的基本概念

Flux是一种架构思想或者说是设计模式，专门解决软件的结构问题。它跟MVC架构是同一类东西，但是更加简单和清晰。

FaceBook Flux是用来构建客户端Web应用的应该架构。他利用单向数据流的方式来组合React中的视图组件。它更像一个模式而不是一个正式的框架，开发者不需要太多的新代码就可以快速上手。

Redux

npm i redux --save   //放在项目根目录中

Redux最主要的作用是用作状态的管理，即：集中式管理状态的javascript库。

两大核心：actions   state

简言之，Redux用一个单独的常量状态树（state对象）保存这一整个应用的状态，这个对象不能直接被改变。当一些数据变化了，一个新的对象就会被创建（使用actions和reducers）,这样就可以进行数据追踪，实现时光之旅。

Redux三大原则 

• state以单一的对象存储在store中,是唯一的数据源，有且只有一个
• state是只读的只能通过action修改
• 使用纯函数reducer执行数据的更新

Redux执行流程（原理）

1. React组件从store获取redux中的数据
2. 当页面数据要进行修改的时候，我们通过dispatch提交actions到store
3. store把actions提交reducers中执行对应的逻辑，修改state中的数据
4. 更新后的state数据返回到store中，更新React组件页面上的数据

Redux的使用

安装Redux

cnpm i redux --save       //放在项目根目录中

 配置使用redux

1. 在src目录创建一个store文件夹，用来存放redux数据
2. 在store新建一个js文件index.js，在index.js中配置redux的内容
3. 在index.js中导入createStore方法，创建redux数据的方法
4. 创建reducers纯函数，纯函数有两个参数state 初始化的数据，actions修改state数据逻辑
5. switch判断actions中提交type类型执行state修改，返回修改的结果
6. createStore方法创建store对象，export default抛出对象的值
7. 在使用redux的页面导入index.js文件即可

// 1.导入createStore方法
import { createStore } from "redux";
// 2.创建一个reducer纯函数的方法，state初始化数据，actions修改数据的行为
const reducer=function (state,actions){
    //定义初始化的数据
    if(!state){
        state={
            count:10
        }
    }
    //定义actions的逻辑代码区域，处理逻辑的信息
    switch(actions.type){
        //调用执行+1的逻辑
        case "PLUS":
            return{
                ...state,
                // count:state.count+1,
                count:state.count+actions.payload,
            }
        case "MIN":
            return{
                ...state,
                count:state.count-1
            }
        default:{
            return{
                ...state
            }
        }
    }
}

//3.创建一个store的对象
const store=createStore(reducer)

// 4.抛出store的对象值
export {store};

Redux具体使用

 

 在src中创建一个components文件夹，再在此文件夹中创建一个Home文件为Home.jsx

import React from 'react'
import {store} from "../../store"

export default function Home(props) {
    // 获取redux数据
    let {count}=store.getState()
    console.log(count);
    return (
        <div>
            <h3>
                主页面
                Redux：{count}
            </h3>
            <button onClick={()=>{store.dispatch({type:"PLUS",payload:2})}}>count++</button>
            <button onClick={()=>{store.dispatch({type:"MIN"})}}>count-1</button>
        </div>
    )
}

然后再在index.js中写入(当数据刷新，但是页面不刷新的时候使用store.subscript)

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import {store} from "./store"
const root = ReactDOM.createRoot(document.getElementById('root'));
store.subscribe(()=>{
  root.render(
    <BrowserRouter>
      <App />
    </BrowserRouter>
  );
})
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);
reportWebVitals();

然后就可以看到一个此页面，上面的count去进行一个加2的操作

小试牛刀（案例：Demo）

 还是一样的去操纵两个文件一个是我们的Home.jsx页面，另一个是store中的index.js文件

第一首先是我们的Home.jsx

import React from 'react'
import {store} from "../../store"
import { useRef } from 'react'
export default function Home(props) {
    // 获取redux数据
    let {count,list}=store.getState()
    let nameinp=useRef(null)
    let ageinp=useRef(null)
    console.log(count);
    const add=()=>{
        console.log(nameinp.current.value,ageinp.current.value);
        // 提交到redux中去
        store.dispatch({type:"ADD",payload:{name:nameinp.current.value,age:ageinp.current.value}})
    }
    return (
        <div>
            {/* <h3>
                主页面
                Redux：{count}
            </h3>
            <button onClick={()=>{store.dispatch({type:"PLUS",payload:2})}}>count++</button>
            <button onClick={()=>{store.dispatch({type:"MIN"})}}>count-1</button> */}
            <hr/>
            <div>
                <input type="text" ref={nameinp} placeholder='请输入姓名'/><br/>
                <input type="text" ref={ageinp} placeholder='请输入年龄'/><br/>
                <button onClick={add}>添加</button>
            </div>
            <ul>
                {list.map((item,index)=>{
                    return(
                        <li key={index}>{item.name}--{item.age}</li>
                    )
                })}
            </ul>
        </div>
    )
}

 其次是我们的store文件夹中的index.js文件（其中有一个添加列表的注释即是我们的添加）

我是一个小趴菜，希望可以对和我一样的新手小白有帮助🤭