react数据集中式管理第一篇--Redux初认识

426 阅读2分钟

本文章主要是对redux做一些简单的介绍,包括概念、原则、使用等。

其他的几篇:

react数据集中式管理第二篇--@reduxjs/toolkit

react数据集中式管理第三篇--redux-saga

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,以此更新state

    reducers.js文件:

    企业微信截图_16505409932636.png

  • Store 会保存 root reducer 返回的状态树

    用 getState() 方法获取 state;

    用 dispatch() 方法发送 action 更改state;


大概使用方式

那么如何创建一个简单的redux去使用呢, 大概的创建代码如下:

安装依赖包:yarn add react-redux

store.js文件:

image.png

此时就可以拿到store去调用分发action和获取state的值

image.png

将store挂载到我们的项目中,就可以正常使用store了;

项目的入口文件index.js

image.png

总结

看到这里是否会觉得每次都要写switch  case来匹配type会觉得很麻烦而且不美观,要是可以分开写自动匹配action的type就蛮好的。

那么我们接下来介绍redux的工具包,@reduxjs/toolkit

其中这篇只需要知道一些基础概念就行了,比如action,dispatch,触发流程等,平时项目不会这样去使用store,比较繁琐。

参考链接: caibaojian.com/react/redux…
Redux 基础,第二节:应用的结构 | Redux 中文官网