Redux 快速上手指南

最新推荐文章于 2024-01-17 12:45:44 发布
最新推荐文章于 2024-01-17 12:45:44 发布
阅读量223 收藏 1
点赞数
分类专栏： react

Redux简介

如果要用一句话来概括Redux，那么可以使用官网的这句话：Redux是针对JavaScript应用的可预测状态容器。此句话虽然简单，但包含了以下几个含义：

  • 可预测性(predictable): 因为Redux用了reducer与纯函数(pure function)的概念，每个新的state都会由旧的state建来一个全新的state。因而所有的状态修改都是”可预测的”。
  • 状态容器(state container): state是集中在单一个对象树状结构下的单一store，store即是应用程序领域(app domain)的状态集合。
  • JavaScript应用: 这说明Redux并不是单指设计给React用的，它是独立的一个函数库，可通用于各种JavaScript应用。

Redux基于简化版本的Flux框架，Flux是Facebook开发的一个框架。在标准的MVC框架中，数据可以在UI组件和存储之间双向流动，而Redux严格限制了数据只能在一个方向上流动。

具体的模型图如下图所示： 
这里写图片描述

为了说明整个模型的运作流程，首先我们需要弄清Redux模型中的几个组成对象：action 、reducer、store。

  • action：官方的解释是action是把数据从应用传到 store 的有效载荷，它是 store 数据的唯一来源；要通过本地或远程组件更改状态，需要分发一个action；
  • reducer：action发出了做某件事的请求，只是描述了要做某件事，并没有去改变state来更新界面，reducer就是根据action的type来处理不同的事件；
  • store：store就是把action和reducer联系到一起的对象，store本质上是一个状态树，保存了所有对象的状态。任何UI组件都可以直接从store访问特定对象的状态。

在Redux中，所有的数据（比如state）被保存在一个被称为store的容器中 ，在一个应用程序中只能有一个store对象。当一个store接收到一个action，它将把这个action代理给相关的reducer。reducer是一个纯函数，它可以查看之前的状态，执行一个action并且返回一个新的状态。

其实说到Redux，就不得不提到Flux，不论是Flux或其他以Flux架构为基础延伸发展的函数库(Alt、Reflux、Redux…)都是为了要解决同一个问题：App state的管理。

不管什么应用程序都需要有App state(应用程序状态)，不论是在一个需要用户登录的应用，要有全局的记录着用户登录的状态，或是在应用程序中不同操作介面(组件)或各种功能上的数据沟通，都需要用到它。

属性React.js的同学都知道，React被设计为一个MVC架构中的View(视图)的函数库，但实际上它可以作的事情比MVC中的View(视图)还要更多，它甚至可以作类似Model(模型)或Controller(控制器)的事情。

同时，在React中的组件是无法直接更动state(状态)的包含值，要透过setState方法来进行更动，这有很大的原因是为了Virtual DOM(虚拟DOM)的所设计，这是其中一点。另外在组件的树状阶层结构，父组件(拥有者)与子组件(被拥有者)的关系上，子组件是只能由父组件以props(属性)来传递属性值，子组件自己本身无法更改自己的props，这也是为什么一开始在学习React时，都会看到大部份的例子只有在最上层的组件有state，而且都是由它来负责进行当数据改变时的重新渲染工作，子组件通常只有负责呈现数据。

当然，有一个很技巧性的方式，是把父组件中的方法声明由props传递给子组件，然后在子组件触发事件时，调用这个父组件的方法，以此来达到子组件对父组件的沟通，间接来更动父组件中的state。不过这个作法并不直觉，需要事先规范好两边的方法。在简单的应用程序中，这沟通方式还可行，但如果是在有复杂的组件嵌套阶层结构时，例如层级很多或是不同树状结构中的子组件要互相沟通时，这个作法是派不上用场的。

在复杂的组件树状结构时，唯一能作的方式，就是要将整个应用程序的数据整合在一起，然后独立出来，也就是整个应用程序领域的数据部份。另外还需要对于数据的所有更动方式，也要独立出来。这两者组合在一起，就是称之为”应用程序领域的状态”，为了区分组件中的状态(state)，这个作为应用程序领域的持久性数据集合，会被称为store(存储)。

说明：以上两段来自慕课网对Redux的总结。

单向数据流是Flux架构的核心设计，其流程示意图如下： 
这里写图片描述

这个数据流的位于最中心的设计是一个AppDispatcher(应用发送器)，你可以把它想成是个发送中心，不论来自组件何处的动作都需要经过它来发送。每个store会在AppDispatcher上注册它自己，提供一个callback(回调)，当有动作(action)发生时，AppDispatcher(应用发送器)会用这个回调函数通知store。

由于每个Action(动作)只是一个单纯的对象，包含actionType(动作类型)与数据(通常称为payload)，我们会另外需要Action Creator(动作创建器)，它们是一些辅助函数，除了创建动作外也会把动作传给Dispatcher(发送器)，也就是调用Dispatcher(发送器)中的dispatch方法。

Dispatcher(发送器)的用途就是把接收到的actionType与数据(payload)，广播给所有注册的callbacks。它这个设计并非是独创的，这在设计模式中类似于pub-sub(发布-订阅)系统，Dispatcher则是类似Eventbus的概念。

Redux配置

配置Redux开发环境的最快方法是使用create-react-app工具。在开始之前，确保已经安装并更新了nodejs、npm和yarn。下面以生成一个redux-shopping项目并安装Redux为例。

如果没有安装create-react-app工具，请使用下面的命令先执行安装操作。

npm install -g create-react-app
  • 1

然后，在使用下面的命令创建redux-shopping项目。

create-react-app redux-shopping

cd redux-shopping
yarn add redux
  • 1
  • 2
  • 3
  • 4

首先，删除src文件夹中除index.js以外的所有文件。打开index.js，删除所有代码，键入以下内容：

import { createStore } from "redux";

const reducer = function(state, action) {
  return state;
}

const store = createStore(reducer);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

上面代码的意思是：

  1. 从redux包中引入createStore()方法；
  2. 创建了一个名为reducer的方法，第一个参数state是当前保存在store中的数据，第二个参数action是一个容器，用于： 
    type - 一个简单的字符串常量，例如ADD, UPDATE, DELETE等。 
    payload - 用于更新状态的数据。
  3. 创建一个Redux存储区，它只能使用reducer作为参数来构造。存储在Redux存储区中的数据可以被直接访问，但只能通过提供的reducer进行更新。

目前，state为undefined或null，要解决这个问题，需要分配一个默认的值给state，使其成为一个空数组。例如：

const reducer = function(state=[], action) {
  return state;
}
  • 1
  • 2
  • 3

目前我们创建的reducer是通用的，那么我们如何使用多个reducer呢？此时我们可以使用Redux包中提供的combineReducers函数。做如下内容修改：

// src/index.js

import { createStore } from "redux";
import { combineReducers } from 'redux';

const productsReducer = function(state=[], action) {
  return state;
}

const cartReducer = function(state=[], action) {
  return state;
}

const allReducers = {
  products: productsReducer,
  shoppingCart: cartReducer
}

const rootReducer = combineReducers(allReducers);

let store = createStore(rootReducer);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

接下来，我们将为reducer定义一些测试数据。

// src/index.js

…

const initialState = {
  cart: [
    {
      product: 'bread 700g',
      quantity: 2,
      unitCost: 90
    },
    {
      product: 'milk 500ml',
      quantity: 1,
      unitCost: 47
    }
  ]
}

const cartReducer = function(state=initialState, action) {
  return state;
}

…

let store = createStore(rootReducer);

console.log("initial state: ", store.getState());
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

接下来，我们可以在终端中执行npm start或者yarn start来运行dev服务器，并在控制台中查看state。 
这里写图片描述

现在，我们的cartReducer什么也没做，但它应该在Redux的存储区中管理购物车商品的状态。我们需要定义添加、更新和删除商品的操作(action)。此时我们可以做如下的一些定义：

// src/index.js

…

const ADD_TO_CART = 'ADD_TO_CART';

const cartReducer = function(state=initialState, action) {
  switch (action.type) {
    case ADD_TO_CART: {
      return {
        ...state,
        cart: [...state.cart, action.payload]
      }
    }

    default:
      return state;
  }
}

…
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

我们继续来分析一下代码。一个reducer需要处理不同的action类型，因此我们需要一个SWITCH语句。当一个ADD_TO_CART类型的action在应用程序中分发时，switch中的代码将处理它。

接下来，我们将定义一个action，作为store.dispatch()的一个参数。action是一个Javascript对象，有一个必须的type和可选的payload。我们在cartReducer函数后定义一个：

…
function addToCart(product, quantity, unitCost) {
  return {
    type: ADD_TO_CART,
    payload: { product, quantity, unitCost }
  }
}
…
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

在这里，我们定义了一个函数，返回一个JavaScript对象。在我们分发消息之前，我们添加一些代码，让我们能够监听store事件的更改。

…
let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
);

unsubscribe();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

接下来，我们通过分发消息到store来向购物车中添加商品。将下面的代码添加在unsubscribe()之前：

…
store.dispatch(addToCart('Coffee 500gm', 1, 250));
store.dispatch(addToCart('Flour 1kg', 2, 110));
store.dispatch(addToCart('Juice 2L', 1, 250));
  • 1
  • 2
  • 3
  • 4

下面是整个index.js文件的源码：

// src/index.js

import { createStore } from "redux";
import { combineReducers } from 'redux';

const productsReducer = function(state=[], action) {
  return state;
}

const initialState = {
  cart: [
    {
      product: 'bread 700g',
      quantity: 2,
      unitCost: 90
    },
    {
      product: 'milk 500ml',
      quantity: 1,
      unitCost: 47
    }
  ]
}

const ADD_TO_CART = 'ADD_TO_CART';

const cartReducer = function(state=initialState, action) {
  switch (action.type) {
    case ADD_TO_CART: {
      return {
        ...state,
        cart: [...state.cart, action.payload]
      }
    }

    default:
      return state;
  }
}

function addToCart(product, quantity, unitCost) {
  return {
    type: ADD_TO_CART,
    payload: {
      product,
      quantity,
      unitCost
    }
  }
}

const allReducers = {
  products: productsReducer,
  shoppingCart: cartReducer
}

const rootReducer = combineReducers(allReducers);

let store = createStore(rootReducer);

console.log("initial state: ", store.getState());

let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
);

store.dispatch(addToCart('Coffee 500gm', 1, 250));
store.dispatch(addToCart('Flour 1kg', 2, 110));
store.dispatch(addToCart('Juice 2L', 1, 250));

unsubscribe();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71

保存代码后，Chrome会自动刷新，可以在控制台中确认新的商品已经添加了。 
这里写图片描述

代码拆分

会发现，index.js中的代码逐渐变得冗杂。所以，接下来我们对上面的项目进行一个组织拆分，使之成为Redux项目。首先，在src文件夹中创建一下文件和文件夹，文件结构如下：

src/
├── actions
│ └── cart-actions.js
├── index.js
├── reducers
│ ├── cart-reducer.js
│ ├── index.js
│ └── products-reducer.js
└── store.js
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

然后，我们把index.js中的代码进行整理：

// src/actions/cart-actions.js

export const ADD_TO_CART = 'ADD_TO_CART';

export function addToCart(product, quantity, unitCost) {
  return {
    type: ADD_TO_CART,
    payload: { product, quantity, unitCost }
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
// src/reducers/products-reducer.js

export default function(state=[], action) {
  return state;
}
  • 1
  • 2
  • 3
  • 4
  • 5
// src/reducers/cart-reducer.js

import  { ADD_TO_CART }  from '../actions/cart-actions';

const initialState = {
  cart: [
    {
      product: 'bread 700g',
      quantity: 2,
      unitCost: 90
    },
    {
      product: 'milk 500ml',
      quantity: 1,
      unitCost: 47
    }
  ]
}

export default function(state=initialState, action) {
  switch (action.type) {
    case ADD_TO_CART: {
      return {
        ...state,
        cart: [...state.cart, action.payload]
      }
    }

    default:
      return state;
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
// src/reducers/index.js

import { combineReducers } from 'redux';
import productsReducer from './products-reducer';
import cartReducer from './cart-reducer';

const allReducers = {
  products: productsReducer,
  shoppingCart: cartReducer
}

const rootReducer = combineReducers(allReducers);

export default rootReducer;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
// src/store.js

import { createStore } from "redux";
import rootReducer from './reducers';

let store = createStore(rootReducer);

export default store;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
// src/index.js

import store from './store.js';
import { addToCart }  from './actions/cart-actions';

console.log("initial state: ", store.getState());

let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
);

store.dispatch(addToCart('Coffee 500gm', 1, 250));
store.dispatch(addToCart('Flour 1kg', 2, 110));
store.dispatch(addToCart('Juice 2L', 1, 250));

unsubscribe();

整理完代码之后，程序依然会正常运行。现在我们来添加修改和删除购物车中商品的逻辑。修改cart-actions.js和cart-reducer.js文件：

// src/reducers/cart-actions.js
…
export const UPDATE_CART = 'UPDATE_CART';
export const DELETE_FROM_CART = 'DELETE_FROM_CART';
…
export function updateCart(product, quantity, unitCost) {
  return {
    type: UPDATE_CART,
    payload: {
      product,
      quantity,
      unitCost
    }
  }
}

export function deleteFromCart(product) {
  return {
    type: DELETE_FROM_CART,
    payload: {
      product
    }
  }
}
// src/reducers/cart-reducer.js
…
export default function(state=initialState, action) {
  switch (action.type) {
    case ADD_TO_CART: {
      return {
        ...state,
        cart: [...state.cart, action.payload]
      }
    }

    case UPDATE_CART: {
      return {
        ...state,
        cart: state.cart.map(item => item.product === action.payload.product ? action.payload : item)
      }
    }

    case DELETE_FROM_CART: {
      return {
        ...state,
        cart: state.cart.filter(item => item.product !== action.payload.product)
      }
    }

    default:
      return state;
  }
}

最后，我们在index.js中分发这两个action：

// src/index.js
…
// Update Cart
store.dispatch(updateCart('Flour 1kg', 5, 110));

// Delete from Cart
store.dispatch(deleteFromCart('Coffee 500gm'));
…
  •  

使用Redux工具进行调试

Redux拥有很多第三方的调试工具，可用于分析代码和修复bug。最受欢迎的是time-travelling tool，即redux-devtools-extension。设置它只需要三个步骤。

  1. 首先，在Chrome中安装Redux Devtools扩展；
  2. 然后，在运行Redux应用程序的终端里使用Ctrl+C停止服务器。并用npm或yarn安装redux-devtools-extension包；
yarn add redux-devtools-extension

一旦安装完成，我们对store.js稍作修改都会反映到结果上。例如，我们还可以把src/index.js中日志相关的代码删除掉。返回Chrome，右键单击该工具的图标，打开Redux DevTools面板。 
这里写图片描述

这里写图片描述

可以看到，Redux Devtools很强大。你可以在action, state和diff(方法差异)之间切换。选择左侧面板上的不同action，观察状态树的变化，你还可以通过进度条来播放actions序列。

集成React

如果你的项目使用的是React，那么Redux可以很方便的与React集成。

  1. 首先，停止服务器，并安装react-redux包，安装的命名如下：
yarn add react-redux
  1. 接下来，在index.js中加入React代码。我们还将使用Provider类将React应用程序包装在Redux容器中；

目前，已经完成了集成的第一部分。可以启动服务器以查看效果。第二部分涉及到使用刚刚安装的react-redux包中的几个方法。通过这些方法将React组件与Redux的store和action相关联。此外，还可以使用Express和Feathers这样的框架来设置API。

在Redux中，我们还可以安装其他一些包，比如axios等。我们React组件的state将由Redux处理，确保所有组件与数据库API的同步。想要查看更多的内容，可以访问下面的链接Build a CRUD App Using React, Redux and FeathersJS

向东_fancy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Redux(状态管理JS库)的使用
yangaoyuan1999的博客
08-25 1022
1.redux是什么 ☀️ ???? redux是一个专门用于状态管理的JS库 1.作用范围：它可以用在react，angular，Vue等项目中，但基本与react配合使用，(Vue一般使用Vuex) 2.作用：集中式管理react应用中多个组件的共享状态 2.什么时候用redux ???? 1.某个组件的状态，需要让其他组件可以随时拿到（共享） 2.一个组件需要改变另一个组件的状态 （通信） 3.总体原则：能不用就不用，如果不用比较吃力才考虑使用 4.一般使用消息订阅与发布机制 3.redux的基
redux使用教程
赵英超的博客
09-29 1133
http://www.redux.org.cn https://github.com/react-guide/redux-tutorial-cn 三大原则 Redux 可以用这三个基本原则来描述： 单一数据源 整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。 这让同构应用开发变得非常容易。来自服务端的...
Redux使用教程【入门篇】
2301_76418831的博客
06-06 440
Redux还提供了一些高级特性，如中间件（middleware）和组件连接（connect）等，用于处理异步操作和在React组件中使用Redux。请注意，Redux的学习曲线较陡，需要一些时间和实践来理解其思想和模式。创建Redux Store：创建一个Redux store来管理应用程序的状态。Store是一个包含所有状态的对象。Redux是一个用于JavaScript应用程序状态管理的可预测状态容器。订阅状态变化：可以使用subscribe方法订阅状态的变化，以便在状态更新时做出响应。
Redux 的简单使用
Niocho的博客
03-08 388
Redux 的简单使用 目录： 1、安装 2、创建Store 3、创建Reducer 4、使用store在组件中调用redux state中的数据 5、向store传值 安装 对于IOS： yarn add redux 对于Windows： npm install redux 创建Store 在src目录下新建store文件夹，并且创建reducer.js和index.js（index.js负...
如何快速上手Vuex
12-09
【Vuex快速上手指南】 在前端开发领域，随着MVVM模式的普及，Vue.js以其简单易用和高效性受到了广泛欢迎。Vue.js的核心特性是实现了DOM与ViewModel的双向绑定，使得视图与数据模型之间能实时同步。然而，对于大型...
redux-observable-demo:快速演示如何使用Redux-observable
04-27
这个“redux-observable-demo”项目旨在为初学者提供一个快速上手Redux-Observable的实例，通过实际操作来理解其工作原理。 在Redux中，通常的动作是同步的，例如增加或减少状态。然而，对于Web应用来说，异步任务...
react-native-express-cn:上快速上手React Native，包含相关示例:shortcake:
03-08
关于一份教你快速上手React Native的指南英文版本为特色 :rocket:内容精简，特为Swift上手RN开发准备 :smiling_face_with_heart-eyes:提供交互式示例，动动手重新熟悉知识点 :flexed_biceps:覆盖RN日常开发的绝大...
鱼redux：组装的扑扑应用程序框架
02-05
"鱼redux"提供了一套推荐的项目结构和最佳实践，帮助开发者快速上手并遵循良好的编码规范，提升团队协作效率。 8. **鱼redux-master文件夹内容** "fish-redux-master"压缩包可能包含了项目的源码、文档、示例应用...
redux使用
weixin_46516691的博客
04-07 669
单纯redux使用： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g
redux的使用
chaitong2204的博客
12-13 197
1.安装redux cnpm install --save redux cnpm install --save react-redux 2.在src目录下创建store，并在其index.js中引入createStore方法 store中的index.js相当于管理员 import {createStore} from 'redux'; const store = createS...
Redux的使用
freeman_xv1的博客
08-25 1001
redux
redux的使用教程
weixin_50786692的博客
12-11 1743
题目:redux的使用教程 前言：学习react的过程中一定会碰到redux，我在学习redux的时候，每每感觉自己记住了，但是用的时候，感觉总是不知如何写起，或者会用的时候总会出错，所以打算写一篇redux的教程，把自己在学习和使用过程中的心得记录下来。 一：认识redux 官网：redux中文网 我的理解：redux是一个独立的（也就是说它并不属于react,在其他框架下也都是可以使用的），开源的，第三方的集中式的状态管理器。提供可预测的状态管理。 二：为什么 那么我们为什么要使用redux呢？ 这就
【React】Redux的使用详解
最新发布
m0_68324632的博客
01-17 4956
Redux就是一个帮助我们管理State的容器：Redux是JavaScript的状态容器，提供了可预测的状态管理
Redux的使用：一个简单的入门Demo
飞翔的小白
07-10 799
代码展示： type.js: export default { ADD_INPUT_NAME: 'ADD_INPUT_NAME' } action.js /** * Action类型 */ import types from '../types' /** * View 要发送多少种消息，就会有多少种 Action。如果都手写，会很麻烦。可以定义一个函数来生成 Action，这个函数就叫 Action Creator。例如：switchMenu * @par...
React-Redux入门教程
蛋蛋
06-21 636
React-ReduxDemoindexAppAddItemFormItemListItemActionReducerStoreConstant   在没有react-redux之前我们想要操作store： 第一种选择是从根节点一直向下传递store 第二种选择是组件中声明childContextTypes并定义Context(上篇文章有Demo)   这种每个组件都要显式定义context或者是显式传递store对于我们的代码来说算是一种小的灾难性（当然并不会
Redux使用和剖析
weixin_40200876的博客
09-09 613
一、JavaScript纯函数 函数式编程中有一个概念叫纯函数，JavaScript符合函数式编程的范式，所以也有纯函数的概念； 在React中，纯函数的概念非常重要，在接下来我们学习的Redux中也非常重要，所以先了解一下纯函数。 1、纯函数的维基百科定义： 在程序设计中，若一个函数符合一下条件，那么这个函数被称为纯函数： 1）此函数在相同的输入值时，需产生相同的输出。函数的输出和输入值以外的其他隐藏信息或状态无关，也和由I/O设备产生的 外部输出无关。 2）该函数不能有语义上.
redux的简单使用（例子演示）
TH226的专栏
10-13 3953
注意：以下每一步是按照redux由易到难的顺序逐步进行的，从初步使用到react与redux的组合使用以及解耦的顺序来的 安装redux npm install redux --save 1、redux的简单使用 1、新建store 2、获取状态 3、派发事件 下边代码简单的演示此过程 在src下新建index.js，在index中编写 import {createStore} from 'r...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值