前言
和vue中的vuex一样，react也有进行状态管理的工具，最近自己在学习这一块的内容所以在此记录一下
什么是Redux
Redux是JS的状态容器,提供了可预测的状态管理。JavsScript的状态容器就是装状态的容器,React中,状态就是state。因此我们所谓的JS的状态容器就是去存储状态state的容器。通常在大型项目中使用Redux进行状态管理
为什么需要Redux
- React管理不断变化的state是非常困难的,需要通过constructor去定义state,要通过this.setState去修改这个state。
- React是在视图层帮助我们解决了DOM的渲染过程,但是State依然是留给我们自己来管理。之前学习过的组件传值props、context等等,
- 当没有使用redux的时候我们实现兄弟组件传值是比较麻烦的,代码很复杂冗余。
Redux的使用
- 安装
npm init -y
npm i redux -D
- 使用
新建一个index.js文件,在index.js去定义相关的内容，下面我直接把关键的地方写上了对应的注释，注意要记住redux中的三个核心：store、action、reducer
// index.js的内容
const redux = require('redux')
// redux有三大块：store、action、reducer
const initState = {
count: 0
}
// 3、reduce 是去连接store和action的
const reducer = (state=initState, action) => {
switch(action.type) {
case 'INCREMENT':
return {
...state, count: state.count + 1}
// 如果没有匹配到任何的action就直接返回state
default:
return state
}
}
// 1、store 保存状态,创建一个store对象即可
const store = redux.createStore(reducer)
// 2、action 是用来修改store的
const action = {
type: 'INCREMENT' }
// 5、在派发action之前可以订阅store的修改,监听store的变化
store.subscribe(() => {
console.log('store被修改了')
})
// 4、派发action
store.dispatch(action)
这个时候我们去用node运行一下index.js会打印出’store被修改了’
如果我们想要获取对应的状态,我们可以在subscribe中获取
store.subscribe(() => {
// console.log('store被修改了')
console.log(`count: ${
store.getState().count}`) // count: 1
})
纯函数的概念
reducer就是一个纯函数,我们是不需要直接修改state的,我们不是直接拿count进行修改的。那这里我们来看一下什么是纯函数。
简单来说纯函数有如下特点：
1、函数的返回结果只依赖于它的参数
2、函数在执行的过程中是没有副作用
比如下面例子 判断是不是纯函数：
const a = 10
const fn = (b) => a + b
console.log(fn(3))
fn的返回结果取决于a和b的值，所以它不是纯函数！下面改写为纯函数
const a = 10
const fn = (x, y) => x + y // 函数的返回结果只依赖于它的参数
console.log(fn(1, 3))
再来看一个例子：
const fnfn = (obj, b) => {
obj.x = 3
return obj.x + b
}
const obj1 = {
x: 1}
console.log(fnfn(obj1, 3))
console.log(obj1.x)
这个fnfn函数也不是纯函数！因为它有副作用，倒数第三行我们定义obj.x为1，但是最后一行打印出来为3，因为fnfn函数对obj.x的值进行了了修改。故它不是纯函数，下面进行纯函数的改写：
const fnfn = (obj, b) => {
return obj.x + b
}
const obj1 = {
x: 1}
console.log(fnfn(obj1, 3))
console.log(obj1.x)
总结
使用Redux的五步骤为：
- 创建一个对象,作为状态state
- 创建Store存储state
- 通过action来修改state
- 修改reducer中的处理代码
- 可以在派发action之前,监听store的变化
本篇文章介绍了Redux使用的基础方法，后面会继续介绍Redux在项目中的使用以及它的其它特性