本文章主要是对redux做一些简单的介绍,包括概念、原则、使用等。
其他的几篇:
react数据集中式管理第二篇--@reduxjs/toolkit
react数据集中式管理第四篇--@rematch/core
什么是Redex
Redux 是一个使用叫做“action”的事件来管理和更新应用状态的模式和工具库 它以集中式Store(centralized store)的方式对整个应用中使用的状态进行集中管理,其规则确保状态只能以可预测的方式更新。
简单理解就是数据的集中式管理,然后根据特定的方式修改数据和获取数据。
Redux的一些字段概念
state:存放数据的位置
action: 是具有type字段的一个js对象;{type: 'xxx', payload: 'value'}
reducer: 是一个函数,接收当前的state和action对象作为参数,返回新的state;作用是监听dispatch的触发。
代码大概格式:const reducer = (state, action) => newState;
dispatch: 更新 state 的唯一方法是调用 store.dispatch() 并传入一个 action 对象 ;可以理解为触发了一个事件。
代码形式:store.dispatch({type: ‘xxx’, payload: 'value'})
Rudex的三个基本原则
- 整个应用只有唯一一个可信数据源,也就是只有一个store;
- state只能通过触发Action来更改
- state的更改必须写成纯函数(pure function)
Redux的大概的触发流程
store.dispatch(action) -> reducer(state, action) -> store.getState()
-
调用 store.dispatch(action)
你可以在任何地方调用 store.dispatch(action),比如组件内部,Ajax 回调函数里面等等。
Action就是一个单纯的包含{type, payload} 的对象; -
Action 会触发给 Store 指定的 root reducer
Reducers 用来处理 Action 触发的对状态树的更改;
根据action的type来决定返回新的state
例如大概的代码:通过action的type去匹配然后去返回新的state,以此更新statereducers.js文件:
-
Store 会保存 root reducer 返回的状态树
用 getState() 方法获取 state;
用 dispatch() 方法发送 action 更改state;
大概使用方式
那么如何创建一个简单的redux去使用呢, 大概的创建代码如下:
安装依赖包:yarn add react-redux
store.js文件:
此时就可以拿到store去调用分发action和获取state的值
将store挂载到我们的项目中,就可以正常使用store了;
项目的入口文件index.js
总结
看到这里是否会觉得每次都要写switch case来匹配type会觉得很麻烦而且不美观,要是可以分开写自动匹配action的type就蛮好的。
那么我们接下来介绍redux的工具包,@reduxjs/toolkit
其中这篇只需要知道一些基础概念就行了,比如action,dispatch,触发流程等,平时项目不会这样去使用store,比较繁琐。
参考链接:
caibaojian.com/react/redux…
Redux 基础,第二节:应用的结构 | Redux 中文官网