Redux 主要作用
- Redux官方定义： 一个 面向javascript应用的 可预测状态容器
- 个人理解：简单来说，就是针对javaScript语言的一款管理容器，可以对页面状态值等进行管理 并按照一定的规则进行状态管理
Redux实现流程
- redux最核心的api为 createStore 主要的功能为创建一个状态的管理库（以后页面的状态值存储在这里）
- createStore有三个参数 第一个参数为reducer函数 第二个参数为初始的state
reducer函数的主要功能 实现针对不同的操作来对数据做对应的处理 然后将新的state的值传递给管理库中 - rducer函数有两个参数
一个为默认的state的值 一个为对state操作的 action
当action被触发了，将action的操作类型传递给reducer reducer针对不同操作类型进行相应的处理 - action参数 为一个含有type类型的对象 页面通过dispatch方法对触发action
- 状态库的值经过一系列的修改够被修改了， 但是需要通过subscribe函数将状态管理库与页面进行订阅，才能实现页面的刷新 页面才能将修改后的值展示出来
简单实现例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id = "add">+</button>
<button id = "sub">-</button>
<span id = "num">0</span>
<script src="redux.min.js"></script>
<script>
/**
* 设置默认状态
*/
let initialState = { count: 0 }
/**
* 2. 创建reducer函数
*/
function reducer(state = initialState, action) {
switch (action.type) {
case 'increment':
return {
count: state.count + 1
}
case 'decrement':
return {
count: state.count - 1
}
default:
return state
}
}
/**
* 1. 创建store对象 返回的就是store
*/
var store = Redux.createStore(reducer)
/**
* 创建action
* */
const increment = { type: 'increment' }
const decrement = { type: 'decrement' }
/**
* 触发action
* */
document.getElementById('add').onclick = function () {
store.dispatch(increment)
}
document.getElementById('sub').onclick = function () {
store.dispatch(decrement)
}
/**
* 订阅store
* */
store.subscribe(() => {
document.getElementById('num').innerHTML = store.getState().count
})
/**
* 获取store对象中存储的状态
*/
console.log(store.getState())
</script>
</body>
</html>
以上是一个简单的实现例子，实现了redux的主要功能。但是项目中往往数据和页面都比较复杂。比如现在最流行的react开发框架，由于其单向数据流的特点，数据只能被父级传递到子级，自己只能通过特别的方法来反传给父级，如果组件层级多的情况下 处理这些事情就比较麻烦， react-redux 将redux与react 进行融合使数据的处理更加方便
- react-redux：react-redux主要实现将redux与react进行结合，react-redux会创建一个独立于react组件树的一个状态管理库，react组件共享库里面的值（比如 一个组件的其中一个组件使用了这个值， 并对其进行了修改， 另外一个组件要使用这个值也是可以使用的， 并且 由于上一个组件操作将其修改了， 这个组件使用的 也是修改后的值）
