专栏首页M不作声Redux快速上手

Redux快速上手

Redux

Redux is a predictable state container for JavaScript apps.

Redux是一个js应用的可预测状态容器。

Redux是根绝Flux改进的一个状态管理器,主要用于处理跨层级组件通信的问题。

Redux有三大原则

  • 整个应用的state被存储在单个的对象树中(store);
  • 状态是只读的,只能通过actions改变状态;
  • 使用纯函数进行更改状态(reducer)。

Store

Store主要有四个方法:

  • getState():获取当前的state
  • dispatch(action):发出一个action
  • subscribe(listener):添加一个监听器
  • createStore(reducer, [preloadedState], [enhancer]):创建store

在创建一个Store时可以添加中间件,如redux-thunk用于异步获取数据,redux-devtools-extension浏览器调试工具等。

redux-thunk和redux-devtools-extension使用:

import { composeWithDevTools } from 'redux-devtools-extension'
import thunk from 'redux-thunk'

const middleware = [ thunk ]
if (process.env.NODE_ENV !== 'production') {
  middleware.push(createLogger())
}

const store = createStore(
  reducer,
  composeWithDevTools(applyMiddleware(...middleware))
)

在项目中添加redux-devtools-extension后再开发者调试工具中就会多出一个redux的选项。

redux-devtools-extension

Reducer

reducer是一个纯函数,大致如下:

(preState, action) => newState

禁止在reducer中修改传入参数;禁止执行有副作用的操作;禁止调用非纯函数。

React的思想是将页面抽象为一个个组件,当两个组件是相互独立时,应该为每个组件创建单独的reducer,最后使用combineReducers()将多个reducer合并。

react-redux

react-redux只有两个API。

react使用react-redux来绑定redux。将根组件包裹在<Provider>中,将store作为props传入,使项目中的任何组件都可以使用store。然后使用connect()函数真正的连接react的组件和redux的store。

export default connect(mapStateToProps)(App)

connect有四个参数:

  • mapStateToProps
  • mapDispatchToProps
  • mergeProps
  • options

1、mapStateToProps(atate, ownProps)允许我们将store中的数据作为props绑定到组件上。

第一个参数为Redux的store,第二个参数为App组件自身的参数。当store或ownProps发生变化时,mapStateToProps()函数会被调用,得出一个新的state,传递给App组件。

2、mapDispatchToProps(dispatch, ownProps)是将action作为props绑定到组件上。

Redux本身提供了bindActionCreators函数,将action包装成直接可被调用的函数,即调用该函数就会触发dispatch。

3、mergeProps(stateProps, dispatchProps, ownProps)

不管是stateProps还是dispatchProps,都需要和ownProps merge之后才会赋值给App,该函数实现了这个功能。但不传递该参数也可以,connect会使用Object.assign方法代替。

4、options

总结

redux的工作流程:

1、页面产生交互性行为,发出action;

store.dispatch(action)

2、Store调用Reducer;

var nextState = todoApp(preState, action)

3、State一旦有变化,Store就会调用监听函数。

store.subscribe(listener)

4、listener通过store.getState()获取状态,React可以触发重新渲染视图。

function listener() {
  let newState = store.getState();
  component.setState(newState)
}

redux工作流程- END -

本文分享自微信公众号 - 大前端合集(fe-stack),作者:M不作声

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-08-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Git

    首先要了解到Git分为几个区域,有工作区、暂存区、版本库、远程仓库。然后在后边会解释项目在各个区域移动。

    不作声
  • 初识webpack

    在开始前,需要先了解webpack中的四个核心概念:入口(entry)、输出(output)、loader、插件(plugins)。

    不作声
  • CSP

    该评论被提交后,会存储在数据库中,当其他用户打开该页面时,该代码会被自动执行,用户就会被攻击到。

    不作声
  • 虚拟化VMware ESXi 6.7服务器安装配置

    vSphere是VNware公司在2001年基于云计算推出的一套企业级虚拟化解决方案、核心组件为ESXi。如今,经历了5个版本的改进,已经实现了虚拟化基础架构、...

    Tinywan
  • Charles 抓包手机app

    mac系统无法使用fiddler, 不知道其他朋友是否遇见过, 只能找替代工具.先去百度上搜索下载Charles 破解版, 选择Charles是4.2.7版本.

    louiezhou001
  • oracle分区两大陷阱

    1.个别场景不能从根本上提高查询速度 在Oracle10g时不支持自动生成分区,技术人员都是手动创建一年或者半年的分区或者当超过限制时把数据都load到...

    用户5166556
  • STM32 IAP程序 源码 和测试代码 有详细的中文注释

    今天调了一天的STM32 IAP程序,程序能下进去,但是一运行就出错,不知道为什么,我一直在查我的IAP程序是否有问题,改了很对地方,就是一直不对~~ ...

    用户4645519
  • python测试开发django-82.线上部署设置DEBUG=FALSE

    django项目线上部署到云服务器,setting里面设置DEBUG=FALSE后,访问网站静态资源没显示相关问题解决。 准备工作: 1.一台服务器,如阿里云,...

    上海-悠悠
  • Oracle分区表之创建维护分区表索引的详细步骤

    墨墨导读:本文来自墨天轮用户投稿,详细描述Oracle分区表之创建维护分区表索引的步骤。

    数据和云
  • C语言(GDB调试器的使用和段错误的定位)

    对于一个程序而言,语法错误由编译器(比如GCC)负责,而逻辑错误则由开发人员负责。项目研发过程中,不可避免地会出现或多或少的问题,有些比较简单的可以目测,有些复...

    用户2617681

扫码关注云+社区

领取腾讯云代金券