三分钟入门Redux(Redux教程)

简介: 一 Redux解决了什么问题? 学习react的朋友都知道组件化是react最擅长的方面,但是在实际开发中,随着应用复杂度地不断提升,组件之间的状态通信变得越来越多,组件之间的耦合也变得越来越重。 这时,Redux诞生了,Redux对所有“组件”说:“你们不要在一对一地写信通知状态了,我是组件群的‘通信云盘’,你们把公共状态存在我这,只要某个状态一改变,各组件都能取到状态的最新值。

学习背景:

我最近在更新师兄之前用React写的项目,该项目中各组件的状态依赖关系非常复杂,为了便于管理组件的状态,师兄使用了Redux。我最近刚转React,此前没有用过Redux,借这个难得的机会,我学习了Redux并对其相关知识点进行了梳理。

一 Redux解决了什么问题?

学习react的朋友都知道组件化是react最擅长的方面,但是在实际开发中,随着应用复杂度地不断提升,组件之间的状态通信变得越来越多,组件之间的耦合也变得越来越重。

这时,Redux诞生了,Redux对所有“组件”说:“你们不要在一对一地写信通知状态了,我是组件群的‘通信云盘’,你们把公共状态存在我这,只要某个状态一改变,各组件都能取到状态的最新值。“

二 使用Redux需掌握哪些最精髓的API?

(1)store: store对象是保存公共数据的地方,一个应用只能创建一个store。下面是创建store方式:

import { createStore } from 'redux';

const store = createStore(function);

(2)state:state是store映射的数据集合,一个 state 只对应一个 view,下面是创建state方法:

import { createStore } from 'redux';
const store = createStore(function);
const state = store.getState(); // 通过store.getState()拿到state

(3)action:state和view捆绑在一起,view发生变化时会用action发出通知。action是改变state的唯一方法,它本质是一个对象,必须要写一个代表action名称的属性——type。除此之外,其他属性可以自由设置,下面是action对象示例:

const action = {
  
  type: 'student_age',
  
  age: 12
};

(4)store.dispatch():store.dispatch()是 view 发出 action 的唯一方法,也可以理解为发射action通知的唯一方法。下面是使用store.dispatch()的代码示例:

store.dispatch({
  type: 'student_age',
  age: 12
});

(5)reducer:reducer是一个计算state的函数,接受两个参数,当前的state和action。当store收到action通知后,一定要返回一个全新的state,这样view才能发生变化。store接收到action传来的数据,然后根据逻辑计算数据,这个过程就称为reducer。下面是reduer的代码示例:

import { createStore } from 'redux';
const reducer = (state = defaultState, action) => { 
  switch (action.type) {
    
    case 'student_age':
      
      return state + action.age;
    
    default: 
      
      return state;
  
}
};

const store = createStore(reducer); // 生成store时传入reducer

实际开发中要在生成store时传入reducer,这样store.dispatch()会自动触发reducer函数执行。

(6)store.subscribe():store.subscribe()监听state变化,state一旦变化就自动触发该函数。下面是它的代码示例:

import { createStore } from 'redux';
const store = createStore(reducer);
store.subscribe(listener);

三 Redux的运行原理是什么?

redux原理图

四 store有哪些重要方法?

store的重要方法

  
目录
相关文章
|
6月前
|
前端开发
【实战指南】React Hooks 详解超厉害!六个步骤带你提升 React 应用状态管理,快来探索!
【8月更文挑战第31天】React Hooks 是 React 16.8 推出的新特性,允许在函数组件中使用状态及其它功能而无需转换为类组件。通过以下六个步骤可有效提升 React 应用的状态管理:1)使用 `useState` Hook 添加状态;2)利用 `useEffect` Hook 执行副作用操作;3)在一个组件中结合多个 `useState` 管理不同状态;4)创建自定义 Hook 封装可重用逻辑;5)借助 `useContext` 访问上下文以简化数据传递;6)合理运用依赖项数组优化性能。React Hooks 为函数组件带来了更简洁的状态管理和副作用处理方式。
57 0
|
前端开发 API
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
95 0
|
JavaScript 前端开发 中间件
【react入门手册】学习react-redux,看这篇文章就够啦!
【react入门手册】学习react-redux,看这篇文章就够啦!
140 0
|
XML 移动开发 前端开发
React简易版入门
React简易版入门
105 0
|
存储 JSON JavaScript
「前端架构」Redux vs.MobX的权威指南
「前端架构」Redux vs.MobX的权威指南
|
监控 JavaScript 前端开发
React-Redux 100行代码简易版探究原理
各位使用 react 技术栈的小伙伴都不可避免的接触过redux + react-redux的这套组合,众所周知 redux 是一个非常精简的库,它和 react 是没有做任何结合的,甚至可以在 vue 项目中使用。
|
JavaScript 前端开发
react实战笔记134:redux简介
react实战笔记134:redux简介
105 0
react实战笔记134:redux简介
|
JavaScript 前端开发 数据管理
|
存储 缓存 JavaScript
React系列十五 - Redux(一)初见
在React的开发过程中,Redux对于我们是非常重要的。 但是对于很多人来说,初次接触redux会感觉redux的学习坡度非常陡峭,难度比较大。 在接下来,我会通过一个系列的方式循循渐进、层层深入的方式来讲解Redux:从redux的独立使用过程、到redux的结构划分、到redux结合react的过程、到redux中异步操作、到复杂数据的结构处理、到结合immutable的使用。 整个过程,都是在现有知识的基础之上层层递增、一步步掌握redux的使用!
170 0
React系列十五 - Redux(一)初见
|
存储 JavaScript 前端开发
从零到一搭建 react 项目系列之(十一)
之前文章提过,Redux 是 Flux 架构与函数式编程结合的产物。
147 0
从零到一搭建 react 项目系列之(十一)