react redux的原理以及基础使用讲解

目录
  • 介绍
    • 为什么会使用 redux？
    • 什么时候该使用 redux？
    • redux使用场景
    • redux 作用
  • 工作流程
  • 使用
    • 1.下载
    • 2.创建仓库store骨架
    • 3.生成仓库
    • 4.参数函数的创建 reducer
    • 5.引入reducer来辅助store的创建

介绍

为什么会使用 redux？

vue 是一个 MVVM层，可以实现 双向数据绑定，而 react 只能算一个 view 层，状态改变了只有去调用setState({xxx}) 才能去修改视图，当我们数据很复杂的时候可能需要用到 redux

什么时候该使用 redux？

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

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

redux使用场景

用户的使用方式复杂不同身份的用户有不同的使用方式（比如普通用户和管理员）多个用户之间可以协作与服务器大量交互，或者使用了WebSocketView要从多个来源获取数据

redux 作用

Web 应用是一个状态机，视图与状态是一一对应的（有一方改变另一方也会改变）。

所有的状态，保存在一个对象里面

工作流程

使用

1.下载

yarn add redux

2.创建仓库store骨架

按图示创建即可

3.生成仓库

import { createStore } from 'redux';
const store = createStore(fn);

通过 creatStore 方法接收一个函数作为参数，最终返回一个仓库

4.参数函数的创建 reducer

可以接收之前的状态 和 action ，最终返回一个新状态

需要定义一个纯函数

const reducer = (prevState,action)=>{
    let newState = prevState.todos.slice()
    return newState
}
export default  reducer

5.引入reducer来辅助store的创建

const store = createStore(reducer);

完整代码展示

//  store/index.js
import { createStore } from 'redux';
import reducer from "./reducer"
const store = createStore(reducer);
export default store
// store/reducer.js
const reducer = (prevState,action)=>{
    let newState = prevState.todos.slice()
    return newState
}
export default  reducer

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈redux以及react-redux简单实现

    写在前头 redux 简介 随着 JavaScript 单页应用开发日趋复杂,JavaScript 需要管理比任何时候都要多的 state (状态). 这些 state 可能包括服务器响应.缓存数据.本地生成尚未持久化到服务器的数据,也包括 UI 状态,如激活的路由,被选中的标签,是否显示加载动效或者分页器等等. 管理不断变化的 state 非常困难.如果一个 model 的变化会引起另一个 model 变化,那么当 view 变化时,就可能引起对应 model 以及另一个 model 的变化,

  • 简单介绍react redux的中间件的使用

    用过react的同学都知道在redux的存在,redux就是一种前端用来存储数据的仓库,并对改仓库进行增删改查操作的一种框架,它不仅仅适用于react,也使用于其他前端框架.研究过redux源码的人都觉得该源码很精妙,而本博文就针对redux中对中间件的处理进行介绍. 在讲redux中间件之前,先用两张图来大致介绍一下redux的基本原理: 图中就是redux的基本流程,这里就不细说. 一般在react中不仅仅利用redux,还利用到react-redux: react-redux这里也不细说.

  • 详解关于react-redux中的connect用法介绍及原理解析

    详解关于react-redux中的connect用法介绍及原理解析

    关于react-redux的一个流程图 流程图 connect用法介绍 connect方法声明: connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options]) 作用:连接React组件与 Redux store. 参数说明: mapStateToProps(state, ownProps) : stateProps 这个函数允许我们将 store 中的数据作为 props 绑定到组件上. const mapSta

  • 一文搞懂redux在react中的初步用法

    Redux是一个数据状态管理插件,当使用React或是vue开发组件化的SPA程序时,组件之间共享信息是一个非常大的问题.例如,用户登陆之后客户端会存储用户信息(ID,头像等),而系统的很多组件都会用到这些信息,当使用这些信息的时候,每次都重新获取一遍,这样会非常的麻烦,因此每个系统都需要一个管理多组件使用的公共信息的功能,这就是redux的作用. 如果你是从来没有接触过redux的开发者,希望您能够有耐心的看一看,我也是看好很多博客慢慢自己总结的!!!!比大佬们一个一个分布找要强一点. imp

  • react redux的原理以及基础使用讲解

    react redux的原理以及基础使用讲解

    目录 介绍 为什么会使用 redux? 什么时候该使用 redux? redux使用场景 redux 作用 工作流程 使用 1.下载 2.创建仓库store骨架 3.生成仓库 4.参数函数的创建 reducer 5.引入reducer来辅助store的创建 介绍 为什么会使用 redux? vue 是一个 MVVM层,可以实现 双向数据绑定,而 react 只能算一个 view 层,状态改变了只有去调用setState({xxx}) 才能去修改视图,当我们数据很复杂的时候可能需要用到 redux

  • redux工作原理讲解及使用方法

    redux工作原理讲解及使用方法

    目录 1. redux 是什么? 2.redux的原理 3. 如何使用 redux? (1).安装redux,创建redux文件夹,建立store.js (2).建立reducers.js (3).引入store.subscribe (4). 引入react-redux 1. redux 是什么? React 只是 DOM 的一个抽象层,并不是 Web 应用的完整解决方案.react只是一个轻量级的视图层框架,如果要做大型应用就要搭配视图层框架redux一起使用.主要引用于多交互.多数据源的场景

  • React中Redux核心原理深入分析

    目录 一.Redux是什么 二.Redux的核心思想 三.Redux中间件原理 四.手写一个Redux 总结 一.Redux是什么 众所周知,Redux最早运用于React框架中,是一个全局状态管理器.Redux解决了在开发过程中数据无限层层传递而引发的一系列问题,因此我们有必要来了解一下Redux到底是如何实现的? 二.Redux的核心思想 Redux主要分为几个部分:dispatch.reducer.state. 我们着重看下dispatch,该方法是Redux流程的第一步,在用户界面中通过

  • React redux 原理及使用详解

    目录 概述 createStore创建store applyMiddleware 应用中间件 combineReducers 合并多个reducer dispatch 中间件 中间件的调用顺序 store redux 数据流 bindActionCreators compose enhancer 使用 redux 常遇见的问题 概述 一个状态管理工具 Store:保存数据的地方,你可以把它看成一个容器,整个应用只能有一个 Store. State:包含所有数据,如果想得到某个时点的数据,就要对

  • React Hooks核心原理深入分析讲解

    目录 Hooks 闭包 开始动手实现 将useState应用到组件中 过期闭包 模块模式 实现useEffect 支持多个Hooks Custom Hooks 重新理解Hooks规则 React Hooks已经推出一段时间,大家应该比较熟悉,或者多多少少在项目中用过.写这篇文章简单分析一下Hooks的原理,并带大家实现一个简易版的Hooks. 这篇写的比较细,相关的知识点都会解释,给大家刷新一下记忆. Hooks Hooks是React 16.8推出的新功能.以这种更简单的方式进行逻辑复用.之前

  • react hooks实现原理解析

    react hooks实现原理解析

    目录 react hooks 实现 Hooks 解决了什么问题 Hooks API 类型 首先接触到的是 State hooks 其次接触到的是 Effect hooks 最后接触到的是 custom hooks Hooks 实现方式 问题一:useState dispatch 函数如何与其使用的 Function Component 进行绑定 react hooks 实现 Hooks 解决了什么问题 在 React 的设计哲学中,简单的来说可以用下面这条公式来表示: UI = f(data)

  • React diff算法原理详细分析

    React diff算法原理详细分析

    目录 抛砖引玉 传统diff算法 React diff原理 tree diff component diff element diff 应用实践 页面指定区域刷新 更加方便地监听props改变 react-router中Link问题 结语 抛砖引玉 React通过引入Virtual DOM的概念,极大地避免无效的Dom操作,已使我们的页面的构建效率提到了极大的提升.但是如何高效地通过对比新旧Virtual DOM来找出真正的Dom变化之处同样也决定着页面的性能,React用其特殊的diff算法解

  • 深入理解React Native核心原理(React Native的桥接（Bridge)

    深入理解React Native核心原理(React Native的桥接（Bridge)

    在这篇文章之前我们假设你已经了解了React Native的基础知识,我们会重点关注当native和JavaScript进行信息交流时的内部运行原理. 主线程 在开始之前,我们需要知道在React Native中有三个主要的线程: shadow queue:负责布局工作 main thread:UIKit 在这个线程工作(译者注:UI Manager线程,可以看成主线程,主要负责页面交互和控件绘制的逻辑) JavaScript thread:运行JS代码的线程 另外,一般情况下每个native模

  • 详解React Fiber架构原理

    详解React Fiber架构原理

    目录 一.概述 二.Fiber架构 2.1 执行单元 2.2 数据结构 2.3 Fiber链表结构 2.4 Fiber节点 2.5 API 2.5.1 requestAnimationFrame 2.5.2 requestIdleCallback 三.Fiber执行流程 3.1 render阶段 3.1.1 遍历流程 3.1.2 收集effect list 3.2 commit阶段 3.2.1 根据effect list 更新视图 3.2.2 视图更新 四.总结 一.概述 在 React 16

  • 一文详解React Redux使用方法

    一文详解React Redux使用方法

    目录 一.理解JavaScript纯函数 1.1 纯函数的概念 1.2 副作用概念的理解 1.3 纯函数在函数式编程的重要性 二.Redux的核心思想 2.1 为什么需要 Redux 2.2 Redux的核心概念 2.2.1 store 2.2.2 action 2.2.3 reducer 2.3 Redux的三大原则 2.3.1 单一数据源 2.3.2 State是只读的 2.3.3 使用纯函数来执行修改 2.4 Redux 工作流程 三.Redux基本使用 3.1 创建Store的过程 3.

随机推荐