redux,react-redux使用基础流程,redux使用基础

本文介绍了Redux和React-Redux的基础使用流程,阐述了Redux的设计思想和三大原则。通过一个todolist的例子,展示了如何使用Redux进行状态管理,包括创建store、actionCreators、reducers以及组件的交互。同时提出了在实际使用中可能遇到的三个问题,为Redux的进阶学习留下思考。
摘要由CSDN通过智能技术生成

react-redux

redux

redux也是一个架构思维, 在这个架构思维中 React 充当是 视图 V
先来看图:
在这里插入图片描述

  1. Store 数据的管理者和数据的存储者

  2. actionCreators 动作的创建者和发送者,发送动作给 reducers

  3. react Components 组件( 用来充当视图层 ),进行用户交互

  4. reducers 数据的修改者,返回一个新的 newstate 给store

React 只是 DOM 的一个抽象层,并不是 Web 应用的完整解决方案。有两个方面,它没涉及。
- 代码结构
- 组件之间的通信

2013年 Facebook 提出了 Flux 架构的思想,引发了很多的实现。2015年,Redux 出现,将 Flux 与函数式编程结合一起,很短时间内就成为了最热门的前端架构。

如果你不知道是否需要 Redux,那就是不需要它

只有遇到 React 实在解决不了的问题,你才需要 Redux

简单说,如果你的UI层非常简单,没有很多互动,Redux 就是不必要的,用了反而增加复杂性。

Redux的设计思想:

  1. Web 应用是一个状态机,视图与状态是一一对应的。
  2. 所有的状态,保存在一个对象里面(唯一数据源)。

注意:flux、redux都不是必须和react搭配使用的,因为flux和redux是完整的架构,在学习react的时候,只是将react的组件作为redux中的视图层去使用了。

Redux的使用的三大原则:

  • Single Source of Truth(唯一的数据源)
  • State is read-only(状态是只读的)
  • Changes are made with pure function(数据的改变必须通过纯函数完成)

Redux的流程:

在这里插入图片描述

  1. store通过reducer创建了初始状态
    import {
    createStore } from 'redux';

    import reducer from "./reducer";	//引入reducer

    const stort = createStore ( reducer )	//通过reducer创建了初始状态

    export default stort;
  
  1. view通过store.getState()获取到了store中保存的state挂载在了自己的状态上
     constructor () {
   
            super()

            this.state = {
   
                todos :  store.getState().todos  //获取到了store中保存的state挂载在了自己的状态
            }

        }
  1. 用户产生了操作,调用了actions 的方法
import * as type from './type'	//事件类型 ,单独拆了出来
import store from './index'
const actionCreators = {
   

    add ( val ) {
   		//调用该方法
        /* 可以前后端数据交互 */
        const action = {
   
            type: type.ADDTODO,
            payload: val   // 负载
        }
        store.dispatch( action )
    }
}
export 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值