三分钟掌握Redux

什么是Redux？

Redux 是 React 最常用的集中状态管理工具，类似于Vue中的Pinia(Vuex)，可以独立于框架运行（不跟React绑定，自己也可以跑起来）。

Redux作用 ：通过集中管理的方式管理应用的状态。

一般用来管理全局都需要使用的状态（eg：用户信息）。这个Store库独立于整个组件数的。

不使用 Redux：整个组件树的组件之间的通信比较混乱。

使用 Redux ：组件树里面任何一个组件都可以使用Store库里面的数据，并且组件树里面任何一个组件也可以通过固定的方式修改Store库里面的数据。一旦Store库里面的数据发生变化，所有用到数据的组件都会得到更新。这就是集中状态管理工具的一个特点。

Redux快速体验

不和任何框架绑定，不使用任何构建工具，使用纯Redux实现计算器。

使用步骤

1、定义一个reducer函数（根据当前想要做的修改返回一个新的状态）；

2、使用createStore方法传入reducer函数，生成一个store实例对象；

3、使用store实例的subscribe方法订阅数据的变化（数据一旦变化，可以得到通知）；

4、使用store实例的dispatch方法提交action对象触发数据变化（告诉reducer你想怎么改数据）【在redux中，修改数据的唯一方式就是通过dispatch方法提交一个action对象】；

5、使用store实例的getState方法获取最新的状态数据更新到视图中。

代码

// redux-counter.html

html 复制代码

<button id="decrement">-</button>
<span id="count">0</span>
<button id="increment">+</button>

<script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>

<script>
// 1. 定义reducer函数
// 作用: 根据不同的action对象，返回不同的新的state

// 👇...


// 2. 使用reducer函数生成store实例

// 3. 通过store实例的subscribe订阅数据变化

// 4. 通过store 实例的dispatch函数提交action更改状态

const inBtn = document.getElementById('increment')
inBtn.addEventListener('click', () => {
    // 增
})

const dBtn = document.getElementById('decrement')
dBtn.addEventListener('click', () => {
    // 减
})

// 5. 通过store实例的getState方法获取最新状态更新到视图中

</script>

1. 定义reducer函数

kotlin 复制代码

// state：管理的数据初始状态
// action: 对象 type 标记当前想要什么样的修改
function reducer (state = { count: 0 }, action) {
    // 问: 为什么返回一个新的对象，不直接给它+1 -1 ? 答: 数据不可变：基于原始的状态生成一个新的状态
    if (action.type === 'INCREMENT') {
        return {
            count: state.count + 1
        }
    }
    
    if (action.type === 'DECREMENT') {
        return {
            count: state.count - 1
        }
    }
    
    return state
}

2. 使用reducer函数生成store实例

ini 复制代码

const store = Redux.createStore(reducer)

3. 通过store实例的subscribe订阅数据变化

javascript 复制代码

// 回调函数可以在每次state发生变化的时候自动执行
store.subscribe(() => {
    console.log('state变化了')
})

4. 通过store实例的dispatch函数提交action更改状态

javascript 复制代码

const inBtn = document.getElementById('increment')
inBtn.addEventListener('click', () => {
    // 增
    store.dispatch({
        type: 'INCREMENT'
    })
})

const dBtn = document.getElementById('decrement')
dBtn.addEventListener('click', () => {
    // 增
    store.dispatch({
        type: 'DECREMENT'
    })
})

5. 通过store实例的getState方法获取最新状态更新到视图中

首先先在subscribe那里看变化:

javascript 复制代码

store.subscribe(() => {
    console.log('state变化了', store.getState())
})

拿到最新状态之后，需要把最新状态的值渲染到页面上。

javascript 复制代码

store.subscribe(() => {
    console.log('state变化了', store.getState())
    
    document.getElementById('count').innerText = store.getState().count
})

把store.getState()对象的count值赋值给count的innerText。

到目前为止，需求完成。

例子总结：

以上是一个简单的使用纯Redux实现的计算器示例。

在这个示例中，我们定义一个reducer函数，它接收当前状态和一个action对象作为参数，并根据action的类型来返回新的状态。

然后我们使用createStore方法传入reducer函数，生成一个store实例对象。

通过store实例的subscribe方法，我们可以订阅数据的变化，当状态发生改变时，我们可以得到通知。

接下来，我们通过store实例dispatch方法提交action对象来触发数据的变化，告诉reducer我们想要如何修改数据。

最后，我们可以使用store实例的getState方法获取最新的状态数据，并将其更新到视图中。

Redux管理数据流程梳理

为了职责清楚，数据流向明确，Redux把整个数据修改的流程分成了三个核心概念, 分别是:

state：一个对象，存放着我们管理的数据状态
action：一个对象，用来描述你想怎么改变数据
reducer：一个函数，根据action的描述生成一个新的state

☎️ 希望对大家有所帮助，如有错误，望不吝赐教，欢迎评论区留言互相学习。感谢阅读，祝您开发有乐趣。