首页 > 其他分享> 文章详细

Redux专题-1.介绍和基本使用Redux

2022-01-28 16:34:08 阅读：185 来源： 互联网

标签：专题 return reducer 介绍 state action Redux store counter

链接: 文档地址.

1.认识`Redux`

1.1JavaScript纯函数

函数式编程中有一个概念叫纯函数，JavaScript符合函数式编程的范式，所以也有纯函数的概念；

在React中，纯函数的概念非常重要，在接下来我们学习的Redux中也非常重要，所以我们有必要来回顾一下纯函数。

纯函数的维基百科定义：

在程序设计中，若一个函数符合以下条件，那么这个函数被称为纯函数；

此函数在相同的输入值时，需产生相同的输出。函数的输出和输入值和其他隐藏信息或状态无关，也和由I/O设备产生的外部输出无关。
该函数不能有语义上可观察的函数副作用，诸如触发事件，使输出设备输出，或更改输出值以外物件的内容等。

当然上面的定义会过于晦涩难懂，所以我简单总结一下；

确定的输入，一定会有确定的输出；
函数在执行过程中，不能产生副作用；

那么我们来看几个函数是否是纯函数；

案例一：

function sum(num1,num2){
	return num1+num2
}

很明显，sum是一个纯函数；
它的输出是依赖我们输入的内容，并且中间没有产生任何的副作用；

案例二：

let foo=5
function add(num){
	return foo+num
}
console.log(add(1))//6
foo=6
console.log(add(1))//7

add函数不是一共纯函数；
函数依赖一共外部的变量，变量发生改变时，会影响确定的输入，产生确定的输出；
能够改成纯函数呢？const foo=2即可；

案例三：

function printInfo(info){
	console.log(info.name,info.age)
	info.name="德玛西亚"
}

printInfo不是一个纯函数；
虽然无论输入什么，最终输出的结果都是undefined，但是它产生了副作用，修改了传入的对象；

当然纯函数还有很多的变种，但是我们只需要理解它的核心就可以了。

为什么纯函数在函数式编程中非常重要呢？

因为你可以安心的写和安心的用
你在写的时候保证了函数的纯度，只是实现自己的业务逻辑即可，不需要关心传入的内容或者依赖其他的外部变量；
你在用的时候，你确定你的输入内容不会被任意的篡改，并且自己确定的输入，一定会有确定的输出；

React中就要求我们无论是函数还是class生命一共组件，这个组件都必须像纯函数一样，保护它们的props不被修改；
在之后的学习redux中，reducer也被要求是一个纯函数。

1.2为什么需要`redux`?

JavaScript开发的应用程序，已经变的越来越复杂了；

JavaScript需要管理的状态越来越多，越来越复杂；
这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等，也包括一些UI的状态，比如某些元素是否被选中，是否显示加载动效，当前分页；

管理不断变化state是非常困难的；

状态之间会存在相互依赖，一个状态的变化会引起另一个状态的变化，View界面也可能会引起状态的变化；
当前应用程序复杂时，state在什么时候，因为什么原因发生了变化，发生了怎么样的变化，会变得非常难以控制和追踪；

React是在视图层帮助我们解决了DOM的渲染过程，但是State依然留给我们自己来管理；

无论是组件自己定义的state，还是组件之间的通信通过props传递；也包括通过Context进行数据之间的共享；
React主要负责帮助我们管理视图，state如何维护最终还是我们自己来决定；

UI = render(state)是react的思想

Redux就是一个帮助我们管理State的容器，Redux是JavaScript的状态容器，提供了可预测的状态管理；
Redux除了和React一起使用外，它也可以和其他界面库一起来使用（比如Vue），并且它非常小（包括依赖在内，只有2kb）；

1.3`Redux`的核心概念

Redux的核心理念非常简单；

比如我们有一个朋友列表需要管理；

如果我们没有定义统一的规范来操作这段数据，那么整个数据的变化就是无法跟踪的；
比如页面某处通过products.push的方式增加了一条数据；
比如同一个界面通过products[0].age=25修改了一条数据；
整个应用程序错综复杂，当出现bug时，很难跟踪到底是哪里发生的变化；

const initState={
	friends:[
		{name:'张三',age:18},
		{name:'李四',age:20},
		{name:'王五',age:24}
	]
}

Redux要求我们通过action来更新数据；

所有数据的变化，必须通过派发dispatch(action)来更新；
action是一个普通的JavaScript对象，用来描述这次更新的type和content；

比如下面就是几个更新friends的action

强制使用action的好处是可以清晰的知道数据到底发生了什么变化，所有的数据变化都是可追踪、可预测的；
当然，目前我们action是固定的对象，真实应用中，我们会通过函数来定义，返回一个action对象；

const action1={type:"ADD_FRIEND",info:{name:"lucy",age:18}}
const action2={type:"INC_AGE",index:0}
const action3={type:"CHANGE_NAME",playload:{index:0,newName:"小明"}}

但是如何将state和action联系到一起呢？答案就是reducer

reducer是一个纯函数；
reducer做的事情就是将传入的state和action结合起来生成一个新的state；

function reducer (state=initState,action){
	switch(action.type){
		case "ADD_FRIEND":
			return {...state,friends:[...state.friends,actioin.info]}
		case "INC_AGE":
			let arr=state.friends.map((item,index)=>{
				if(index===action.index){
					return {...item,age:item.age+1}
				}
				return item
			})
			return {...state,friends:arr}
		case "CHANGE_NAME":
			let arr=state.friends.map((item,index)=>{
				if(index===action.index){
					return {...item,name:action.newName}
				}
				return item
			})
			return {...state,friends:arr}
		default:
			return state;
	}
}

1.4Redux的三大原则

单一数据源
整个应用中的state被存储在一棵object tree中，并且这个object tree只存储在一个store中；

Redux并没有强制让我们不能够创建多个Store，但是那样做并不利于数据的维护；
单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改；

state是只读的
唯一修改的方法一定是触发action，不要试图在其他任何地方通过任何方式来修改state；

这样就确保了View或网络请求都不能直接修改state，它们只能够通过action来描述自己想要如何修改state；
这样就可以保证所有的修改都被集中化处理，并且按照严格的顺序来执行，所以不需要担心race condition(竞态)的问题；

使用纯函数来执行修改
通过reducer 旧的state和action联系在一起，并且返回一个新的State;

随着应用程序的复杂度增加，我们可以将reducer拆分成多个小的reducers，分别操作不同的state tree的一部分；
但是所有的reducer都应该是纯函数，不能产生任何的副作用；

2.Redux的基本使用

2.1Redux使用过程

安装Redux

npm install redux --save
# 或
yarn add redux

这里，我通过创建一个简单的js文件，来简单学习一下Redux；

搭建项目结构
1.创建一个新的项目文件夹：Redux-learn

# 执行初始化操作
yarn init

# 安装redux
yarn add redux

2.创建src目录，并且创建index.js文件

暂时没有内容

3.修改package.json，可以执行index.js

"scripts": {
  "start": "node src/index.js"
}

开始在index.js中编写代码
1.创建一个对象，作为我们要保存的状态

const redux=reqire("redux")
const initState={
	counter:0
}

2.创建Store来存储这个state

创建store时必须创建reducer
我们可通过store.getState()来获取当前的state

//创建reducer
function reducer(state=initState,action){
	return state
}
//根据reducer创建store
const store=redux.createStore(reducer)
console.log(store.getState())//{counter:0}

3.通过action来修改state

通过dispatch来派发action
通常action中都会有type属性，也可以携带其他的数据

store.dispatch({
  type: "INCREMENT"
})

store.dispath({
  type: "DECREMENT"
})

store.dispatch({
  type: "ADD_NUMBER",
  number: 5
})

4.修改reducer中的处理代码

这里一定要记住reducer是一个纯函数，不需要直接修改state；
后面会说直接修改state带来的问题

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT":
      return {...state, counter: state.counter + 1};
    case "DECREMENT":
      return {...state, counter: state.counter - 1};
    case "ADD_NUMBER":
      return {...state, counter: state.counter + action.number}
    default: 
      return state;
  }
}

5.在派发action之前，监听store的变化；

store.subscribe(() => {
  console.log(store.getState());
})

完整的案例代码如下

const redux = require("redux");

function add() {
  return {
    type: "add",
    speed: 2,
  };
}

function reduce() {
  return {
    type: "reduce",
    speed: 1,
  };
}

const initState = {
  counter: 9,
};

function reducer(state = initState, action) {
  switch (action.type) {
    case 'add':
      return {...state,counter:state.counter+action.speed}
    case 'reduce':
      return {...state,counter:state.counter-action.speed}
    default:
      return state
  }
}

let store = redux.createStore(reducer);

store.subscribe(()=>{
  console.log(store.getState());
})

setTimeout(() => {
  store.dispatch(add(2))
}, 2000);
setTimeout(() => {
  store.dispatch(reduce(1))
}, 6500);

2.2Redux结构划分

如果我们将所有的逻辑代码写到一起，那么当Redux变得复杂的时候就难以维护。
接下来，我会对代码进行拆分，将store、reducer、action、constants拆分成一个个的文件；

注意：node中对ES6的支持
目前我使用的node版本是12.18.3，从node v13.2.0开始，node才对模块化提供了支持；

node v13.2.0之前需要进行如下操作
- 在package.json添加属性："type":"module"；
- 在执行命令中添加如下选项：node --experimental-modules src/index.js；
node v13.2.0之前需要进行如下操作
- 在package.json中添加属性"type":"module"

注意：导入文件时，需要跟上**.js**后缀名

对Redux进行拆分
1.创建store/index.js文件

import redux from 'redux'
import reducer from './reducer.js'

let store =redux.createStore(reducer)

export default store

2.创建store/reducer.js文件

2.1不拆分

import {ADD,REDUCE,PUSHARR,POPARR}from './constants.js'
const initState={
  counter:1,
  arr:[111,222,333]
}

function reducer(state=initState,action){
  switch (action.type) {
    case ADD:
      return {...state,counter:state.counter+action.speed}
    case REDUCE:
      return {...state,counter:state.counter-action.speed}
    case PUSHARR:
      state.arr.push(...action.arr)
      return {...state,arr:[...state.arr]}
    case POPARR:
      state.arr.pop()
      return {...state,arr:[...state.arr]}
    default:
      return state
  }
}
export default reducer

2.2拆分

import {ADD,REDUCE,PUSHARR,POPARR}from './constants.js'
import redux from "redux"
const initState={
  counter:1,
  arr:[111,222,333]
}

function reducerAddReduce(state=initState,action){
  switch (action.type) {
    case ADD:
      return {...state,counter:state.counter+action.speed}
    case REDUCE:
      return {...state,counter:state.counter-action.speed}
    default:
      return state
  }
}

function reducerArr(state=initState,action){
  switch (action.type) {
    case PUSHARR:
      state.arr.push(...action.arr)
      return {...state,arr:[...state.arr]}
    case POPARR:
      state.arr.pop()
      return {...state,arr:[...state.arr]}
    default:
      return state
  }
}

let reducer =redux.combineReducers({
  changeCounter:reducerAddReduce,
  changeArr:reducerArr
})
export default reducer

3.创建store/actionCreate.js文件

import { ADD, REDUCE, PUSHARR, POPARR } from "./constants.js";

function add(speed) {
  return {
    type: ADD,
    speed,
  };
}
function reduce(speed) {
  return {
    type: REDUCE,
    speed,
  };
}
function pushArr(arr) {
  return {
    type: PUSHARR,
    arr,
  };
}
function popArr() {
  return {
    type: POPARR,
  };
}

export { add, reduce, pushArr, popArr };

4.创建store/constants.js文件

const ADD = "ADD";
const REDUCE = "REDUCE";
const PUSHARR = "PUSHARR";
const POPARR = "POPARR";

export { ADD, REDUCE, PUSHARR, POPARR };

5.在src/index.js文件中使用

import store from './store/index.js'
import {add,reduce,pushArr,popArr} from './store/actionCreators.js'

store.subscribe(()=>{
console.log(store.getState());
//不拆分reducer打印的示例：{ counter: 2, arr: [ 111, 222, 333, 444, 555 ] }
//拆分reuder打印示例：{
  //changeCounter: { counter: 2, arr: [ 111, 222, 333, 444, 555 ] },
  //changeArr: { counter: 1, arr: [ 111, 222, 333, 444 ] }
//}
})
setTimeout(() => {
  store.dispatch(add(2))
}, 1000);
setTimeout(() => {
  store.dispatch(reduce(1))
}, 2000);
setTimeout(() => {
  store.dispatch(pushArr([444,555]))
}, 3000);
setTimeout(() => {
  store.dispatch(popArr())
}, 3000);

6.运行
yarn start

2.3Redux流程图

我们已经知道了Redux的基本使用过程，那么我们就更加清晰的认识一下Redux在实际开发中的流程；

1.全局通常只有一个Store，存储我们的State；
2.Component中在某些情况去会派发Action(这些action都是提前定义好的)
3.reducer会接收到这些action，并且在reducer中会返回一个新的State，作为Store的State；
4.State发生更新之后会触发通知，告知订阅者数据发生了改变；
5.订阅者拿到最新的数据(props)中，更新到jsx中，界面改变

标签：专题,return,reducer,介绍,state,action,Redux,store,counter
来源： https://blog.csdn.net/big_sun_962464/article/details/122728047

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9