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执行流程（原理）
- React组件从store获取redux中的数据
- 当页面数据要进行修改的时候，我们通过dispatch提交actions到store
- store把actions提交reducers中执行对应的逻辑，修改state中的数据
- 更新后的state数据返回到store中，更新React组件页面上的数据
Redux的使用
安装Redux
cnpm i redux --save //放在项目根目录中
配置使用redux
- 在src目录创建一个store文件夹，用来存放redux数据
- 在store新建一个js文件index.js，在index.js中配置redux的内容
- 在index.js中导入createStore方法，创建redux数据的方法
- 创建reducers纯函数，纯函数有两个参数state 初始化的数据，actions修改state数据逻辑
- switch判断actions中提交type类型执行state修改，返回修改的结果
- createStore方法创建store对象，export default抛出对象的值
- 在使用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文件（其中有一个添加列表的注释即是我们的添加）
