【前端知识】React 基础巩固(三十一)—

这篇具有很好参考价值的文章主要介绍了【前端知识】React 基础巩固(三十一)——Redux的简介。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

React 基础巩固(三十一)——Redux

一、Redux是个纯函数

概念

纯函数（确定的输入一定产生确定的输出，函数在执行过程中不产生副作用）：

在程序设计中，若一个函数符合以下条件，那么这个函数就被称为纯函数
此函数在相同的输入值时，需产生相同的输出
函数的输出和输入值以外的其他隐藏信息或状态无关，也和由I/O设备产生的外部输出无关
函数不能有语义上可观察的函数副作用，诸如“触发事件”，使输出设备输出或更改输出值以外物件的内容

副作用：本身是医学概念，在计算机科学中，表示在执行一个函数时，除了返回函数值外，还对调用函数产生了附加的影响。例如，修改了全局变量，修改参数或改变外部的存储。

作用

可以放心的编写和使用
保证函数的纯度，只需关心相应的业务逻辑，无需关心传入的内容是如何获得的或者依赖其他的外部变量是否已经发生了修改
确定输入内容不会被任意篡改，有确定的输入，有确定的输出。

二、为什么需要Redux

面临的问题：

状态多：JS开发的应用程序越来越复杂，需要管理的状态越来越多，这些状态包括：服务器返回的数据、缓存数据、用户操作产生的数据等等，也包括一些UI的状态，比如某些元素是否被选中，是否显示加载动效，当前分页
管理难：管理不断变化的state是非常困难的，状态之间相互存在依赖，一个状态的变化会引起另一个状态的变化，View页面也有可能会引起状态的变化。随着应用程序越来越复杂，state的变化变得难以控制和追踪
靠自己：React是在视图层帮助我们解决了DOM的渲染过程，但是State依然留给我们自己来管理。无论是组件定义的state，组件之间的通信，还是通过Context进行的数据共享，这些维护的工作最终由我们自己来决定，而非React。

Redux的出现，能帮助我们管理State，Redux是JS的状态容器，提供了可预测的状态管理，Redux除了和React配合使用外，也可以和Vue等其他界面库一起使用。

三、Redux的核心理念

Store

定义统一的规范来存储数据

const initialState = {
  books: [
    {name:'book1', price: 35},
    {name:'book2', price: 35},
    {name:'book3', price: 35},
    {name:'book4', price: 35}
  ]
}

action

Redux要求必须通过action来更新数据。action是一个普通JS对象，用来描述此次更新的type和content，所有数据的变化必须通过派发action来更新。

const action1 = { type: "ADD_BOOK", info:{ name:"book5", price:99}}
const action2 = { type: "INC_PRICE", index: 0}
const action3 = { type: "CHANGE_NAME", playload:{ index: 1, newName:"book666"}}

reducer

reducer是一个纯函数，将传入的state和action结合起来生成一个新的state。文章来源地址https://www.toymoban.com/news/detail-602048.html

store/index.js

const { createStore } = require("redux");

// 初始化数据
const initialState = {
  name: "test",
  title: "hello redux",
};

// 定义reducer函数：纯函数
// 两个参数：
// 1.store中上一次的值；
// 2.本次需要更新的action
// 返回值：它的返回值会作为sto re之后存储的state
function reducer(state = initialState, action) {
  console.log("reducer:", state, action);
  // 有新数据进行更新的时候，那么返回一个新的state
  if (action.type === "change_name") {
    return {
      ...state,
      name: action.name,
    };
  } 
  // 若没有新数据更新，返回之前的state
  return state;
}

// 创建的store
const store = createStore(reducer);

module.exports = store;

test.js

const store = require("./store");

console.log(store.getState());

// 使用action修改store中的数据
const nameAction = {
  type: "change_name",
  name: "change name test",
};
store.dispatch(nameAction);

console.log(store.getState());

const nameAction2 = {
  type: "change_name",
  name: "change name test111",
};
store.dispatch(nameAction2);

console.log(store.getState());