Redux的基本使用和react-redux使用的区别,并且该如何结合使用redux-saga?

本文介绍了Redux作为JavaScript应用的状态管理工具,重点阐述了Redux的三大核心——Store、Action和Reducer,以及如何使用Redux-saga处理异步操作。还对比了Redux与react-redux的区别,说明了react-redux的Provider和connect组件如何实现UI组件与store的连接。此外,文章详细讲解了redux-saga的使用步骤和常见Effect方法,包括takeEvery、put和call等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Redux

Redux是React中使用广泛的集中状态管理工具 类比vuex之于vue 同类的工具还有mobx等

Redux最主要是用作应用状态的管理。简言之,Redux用一个单独的常量状态树(state对象)保存这一整个应用的

状态,这个对象不能直接被改变。当一些数据变化了,一个新的对象就会被创建(使用actions和reducers),这

样就可以进行数据追踪,实现时光旅行

Redux是一款状态管理库,并且提供了react-redux库来与React亲密配合

1. redux介绍及设计和使用的三大原则

  • state 以单一对象存储在store对象中

  • state只读(每次返回一个新的对象)

  • 使用纯函数reducer执行state更新

  1. state: 一个对象 存放着我们管理的数据

  2. action: 一个对象 用来描述你想怎么改数据

  3. reducer: 一个函数 根据action的描述更新state

2.Redux模型中的几个组成对象:

action 、reducer、store:

  • action:官方的解释是action是把数据从应用传到 store 的有效载荷,它是 store 数据的唯一来源;要通过本地或远程组件更改状态,需要分发一个action;

  • reducer:action发出了做某件事的请求,只是描述了要做某件事,并没有去改变state来更新界面,reducer就是根据action的type来处理不同的事件

  • store:store就是把action和reducer联系到一起的对象,store本质上是一个状态树保存了所有对象的状态。任何UI组件都可以直接从store访问特定对象的状态。

Redux是针对JavaScript应用的可预测状态容器

3.Redux 三大核心

Redux的核心由三部分组成:Store, Action, Reducer

  1. Store : 是个对象,贯穿你整个应用的数据都应该存储在这里。

  2. Action: 是个对象,必须包含type这个属性,reducer将根据这个属性值来对store进行相应的处理。除此之外的属性,就是进行这个操作需要的数据。

  3. Reducer: 是个函数。接受两个参数:要修改的数据(state) 和 action对象。根据action.type来决定采用的操作,对state进行修改最后返回新的state

4.Store有三个方法:

  1. getState:用来获取store里面存储的数据。

  2. dispatch: store里的数据不能直接修改,只能通过触发action来进行修改,这个方法就是用来触发action。

  3. subscibe:订阅store改变时,要进行的操作。比如在react中,当store改变时,我们需要调用render方法对视图进行更新。

5.redux使用

// 引入redux
import { applyMiddleware, combineReducers, createStore,compose  } from 'redux'
import CityReducer from './reducers/CityReducer'
// 导入ReduxThunk或redux-promise中间件,可以解决异步接收数据问题
// 同步不需要中间件
import ReduxThunk from 'redux-thunk'
import ReduxTPromise from 'redux-promise'
// 通过combineReducers把一个由多个不同 reducer 函数作为 value 的 object,合并成一个最终的 reducer 函数,然后就可以对这个 reducer 调用 createStore
const reducer = combineReducers({  CityReducer})
// 使用ReduxThunk,导入applyMiddleware中间件使
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值