Redux的核心知识

本文主要是介绍Redux的核心知识，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

首先我们要知道Redux是什么

Redux是JavaScript的状态容器，它提供了可预测的状态管理。Redux可以运行在不同的环境下，不论是客户端、服务器端，还是原生应用都可以运行Redux。注意，Redux和React之间没有什么特别的关系，不要因为它们都是Re开头你就以为它们是有什么关联关系。不管你使用什么框架，Redux都可以作为一个状态管理器应用到这些框架上。

Redux的动机

当前端开发的应用变得越来越复杂的时候，随着各种框架的推出，单页面应用也层出不穷，这些应用的状态(state)也变得复杂起来。状态其实就是这个应用运行的时候需要的各种各样的动态数据，它们可能来自服务器端返回的数据、本地生成还没有持久化到服务器的数据、本地缓存数据、服务器数据加载状态、当前路由等。
管理这些不断的变化令人非常苦恼，改变一个model的时候可能会引起其他无法预料的副作用，比如说其他model的变化或者view的变化。state在何时、什么原因发生了改变都变得无法预测。
Redux正是视图解决这个问题、让state的变化可以预测的工具。它是如何做到的呢？先来看一下它提出的三大定律。

三大定律

1. 单一数据源
   整个应用的state存储在一个JavaScript对象中，Redux用一个称为store的对象来存储整个state。比如，在Deskmark添加上用户的概念的话，我们可以设计一个这样的结构来存储所以数据：

{
	posts: {
		isLoading: false,
		items: {
			{id: 1, content: 'hello world'}
		}
	},
	user: {
		isLoading: false,
		userInfo: {
			name: 'viking',
			email: 'viking@me.com'
		}
	}
}

2. state是只读的
   不能在state上面直接修改数据，改变state的唯一方法是触发action。action只是一个信息载体，一个普通的JavaScript对象。
   这样确保了其他操作都无法修改state数据，整个修改都被集中处理，而且严格按顺序执行。

//使用dispatch触发store改变
store.dispatch({
	type: 'CREATE_POST',
	post: {id: 2, content: 'hello there'}
});
//使用getState方法返回当前state
store.getState();

3. 使用纯函数执行修改
   为了描述action怎样改变state，需要编写reducer来规定修改的规则。
   reducer是纯函数，接收先前的state和处理的action，返回新的state。reducer可以根据应用的大小拆分成多个，分别操控state的不同部分。
   纯函数的好处是它无副作用，有什么样的输入就有什么样的输出。比如说数组的reduce方法就是一个reducer。

//这就是一个reducer，负责处理action，返回新的state
function posts(state = [], action) {
	switch (action.type) {
		case 'CREATE_POST':
			return [...state, action.post];
		default:
			return state;
	}
}

这篇关于Redux的核心知识的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！