一篇文章介绍redux、react-redux、redux-saga总结资源-CSDN下载

144 浏览量 2020-12-11 00:08:20 上传评论收藏 165KB PDF 举报

资源推荐

资源详情

资源评论

一篇文章介绍一篇文章介绍redux、、react-redux、、redux-saga总结总结

本篇主要将react全家桶的产品非常精炼的提取了核心内容，精华程度堪比精油。各位大人，既然来了，客官您坐，来人，给

客官看茶~~

redux

前言

首先，本篇文章要求您对js,react等知识有一定的了解，如果不曾了解，建议您先看一下：React精髓！一篇全概括(急速)

React有props和state:

props意味着父级分发下来的属性

state意味着组件内部可以自行管理的状态，并且整个React没有数据向上回溯的能力，这就是react的单向数据流

这就意味着如果是一个数据状态非常复杂的应用，更多的时候发现React根本无法让两个组件互相交流，使用对方的数

据，react的通过层级传递数据的这种方法是非常难受的，这个时候，迫切需要一个机制，把所有的state集中到组件顶部，能

够灵活的将所有state各取所需的分发给所有的组件，是的，这就是redux

简介简介

redux是的诞生是为了给 React 应用提供「可预测化的状态管理」机制。

Redux会将整个应用状态(其实也就是数据)存储到到一个地方，称为store

这个store里面保存一棵状态树(state tree)

组件改变state的唯一方法是通过调用store的dispatch方法，触发一个action，这个action被对应的reducer处理，于是state完

成更新

组件可以派发(dispatch)行为(action)给store,而不是直接通知其它组件

其它组件可以通过订阅store中的状态(state)来刷新自己的视图

使用步骤使用步骤

创建reducer

可以使用单独的一个reducer,也可以将多个reducer合并为一个reducer，即：combineReducers()

action发出命令后将state放入reucer加工函数中，返回新的state,对state进行加工处理

创建action

用户是接触不到state的，只能有view触发，所以，这个action可以理解为指令，需要发出多少动作就有多少指令

action是一个对象，必须有一个叫type的参数，定义action类型

创建的store，使用createStore方法

store 可以理解为有多个加工机器的总工厂

提供subscribe，dispatch，getState这些方法。

按步骤手把手实战。

上述步骤，对应的序号，我会在相关代码标出

npm install redux -S // 安装

import { createStore } from 'redux' // 引入

const reducer = (state = {count: 0}, action) => {----------> ⑴

switch (action.type){

case 'INCREASE': return {count: state.count + 1};

case 'DECREASE': return {count: state.count - 1};

default: return state;

}

}

const actions = {---------->⑵

increase: () => ({type: 'INCREASE'}),

decrease: () => ({type: 'DECREASE'})

}

const store = createStore(reducer);---------->⑶

剩余6页未读，继续阅读

内容反馈

weixin_38544152

粉丝: 4

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip