资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/redux简单使用

redux简单使用

WalkerXu / 1164人阅读

摘要：方法是会在连接组件的时候随着组件的传递到各个组件的，所以组件内都是可以用的。如何跟一起使用请参考文档这边并不进行详细讲解，以为这不是这篇文章的重点，以后会多带带在其他文章中进行讲解。

在react火热的年代，flux作为fb提出的最适合react的数据模型，时下有非常多的实现。
而redux作为在众多的flux地实现中脱颖而出，及其精简的代码，却能带来实用的功能，正好自己的项目中要用，所以让我们来分析redux

为什么要写这个文档呢，因为我看官方文档各种看不懂啊，琢磨了半天都不理解，最后是去看了源码才看明白
因为他的一些概念没搞清楚的话，就不知道他的文档在说什么。为了不让更多的人掉坑里面，这里稍微解释一些概念。

学习redux需要知道redux的三个部分：

action

reducer

store

action

redux中得action就是你自己定义的一个动作，什么是动作？你可以理解为用户的动作你做出的反应，最简单地例子就是当你进行分页的时候，
跳到特定的页数这个动作。我们可以通过类似如下的代码定义action：

/*
 * action types
 */
 
export const ADD_TODO = "ADD_TODO";
export const COMPLETE_TODO = "COMPLETE_TODO";
export const SET_VISIBILITY_FILTER = "SET_VISIBILITY_FILTER";

/*
 * other constants
 */

export const VisibilityFilters = {
  SHOW_ALL: "SHOW_ALL",
  SHOW_COMPLETED: "SHOW_COMPLETED",
  SHOW_ACTIVE: "SHOW_ACTIVE"
};

/*
 * action creators
 */

export function addTodo(text) {
  return { type: ADD_TODO, text };
}

export function completeTodo(index) {
  return { type: COMPLETE_TODO, index };
}

export function setVisibilityFilter(filter) {
  return { type: SET_VISIBILITY_FILTER, filter };
}

在这里定义action之后用来出发的，通过dispatch方法来触发动作，在这里action只是一些常亮的定义。
dispatch方法接收的参数是一个object，而且object必须包含一个type属性，告诉我们需要执行的操作。
而对象里面的包含的其他属性则可以在执行动作的时候用作其他用途。

dispatch方法是会在store连接组件的时候随着组件的props传递到各个组件的，所以组件内都是可以用的。

reducer

这是在redux里面提出来的概念，具体啥含义请参考官网，因为我也解释不清楚╮(╯▽╰)╭

reducer在这里是核心，因为redux是只有一个store的，所以整个app的状态和数据都存储在一个store里面，
如果所有状态变化都在store里面进行逻辑操作，那么这个store肯定是无法维护的，所以在这里我们把状态的变化放到了reducer里面。
我们先来看一下如何定义一个reducer：

import { combineReducers } from "redux";
import { ADD_TODO, COMPLETE_TODO, SET_VISIBILITY_FILTER, VisibilityFilters } from "./actions";
const { SHOW_ALL } = VisibilityFilters;

function visibilityFilter(state = SHOW_ALL, action) {
  switch (action.type) {
  case SET_VISIBILITY_FILTER:
    return action.filter;
  default:
    return state;
  }
}

function todos(state = [], action) {
  switch (action.type) {
  case ADD_TODO:
    return [...state, {
      text: action.text,
      completed: false
    }];
  case COMPLETE_TODO:
    return [
      ...state.slice(0, action.index),
      Object.assign({}, state[action.index], {
        completed: true
      }),
      ...state.slice(action.index + 1)
    ];
  default:
    return state;
  }
}

const todoApp = combineReducers({
  visibilityFilter,
  todos
});

export default todoApp;

如你所见，reducer只是一个方法，在reducer里面根据传入的action里面的type进行不同的state地操作。
在这里必须理解一点，在你调用dispatch方法的时候传入的action动作就是reducer里面接受的action

在这里我们唯一用到redux的功能只有combineReducers方法，这个方法的作用是把不同的reducer合并到一起，
因为在创建store的时候我们只能传入一个reducer，但是我们不可能把所有逻辑操作写到一个reducer里面，所以这边提供了这个方法。

store

store的作用即是整合所有的reducer，然后提供一些帮助方法，例如dispatch等方法让我们使用，
代码如下：

let store = createStore(reducer);

是的，就是这么简单。

如何跟react一起使用

请参考文档
这边并不进行详细讲解，以为这不是这篇文章的重点，以后会多带带在其他文章中进行讲解。

理解

如何理解redux的重点就在于，redux如何处理整个数据流的走向。
基本的思路如下：

component --dispatch(action)--> reducer --update(state)--> store --update(props)--> component

这就是整个数据的走向

看到这里，你们肯定跟我有相同的想法：reducer到底是个什么东西！

那么我们就来理解一下

我们看一下reducer的定义：

function todos(state = [], action) {
  switch (action.type) {
  case ADD_TODO:
    return [...state, {
      text: action.text,
      completed: false
    }];
  case COMPLETE_TODO:
    return [
      ...state.slice(0, action.index),
      Object.assign({}, state[action.index], {
        completed: true
      }),
      ...state.slice(action.index + 1)
    ];
  default:
    return state;
  }
}

首先他接受两个参数，一个是state，一个是action。

action我们知道是在dispatch的时候传入的告诉我们进行什么操作的，那么state是什么？
state就是store里面存着的状态，即数据。我们可以看到每个reducer都会返回state，而这些state最终都会保存在store里面。

**每次触发一个action的时候，store调用reducer，同时传入本身保存着的state，reducer根据传入的state和action返回新的state，
store更新state，返回以props的方式传入组件，这就形成了整个数据流循环**

以上是redux的最基础使用，这也是redux的核心，然后后面还有一堆redux的扩展以及中间件进行学习，这仅仅是一个开始，以后还有更长的路要走^_^

云服务器 GPU云服务器 简单使用 Redux redux源码 redux-saga

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78913.html

相关文章

  • Rematch: Redux 的重新设计

    摘要：沿着管道有两组侦听器中间件和订阅。中间件是可以侦听传入的动作的函数，支持诸如，或侦听器之类的工具。将视为一个带有更新前更新后钩子的全局对象，以及能够以简单的方式合成新状态。应将两者视为一体，并且不再需要文件导出类型的字符串。 难道现在状态管理不是一个可以解决的问题吗?直观地说，开发人员似乎知道一个隐藏的事实:状态管理的使用似乎比需要的更困难。在本文中，我们将探讨一些你可能一直在问自己的...

    Taste 评论0 收藏0

  • 重新设计 Redux

    摘要：相关状态父组件传递给子组件的状态。外部状态状态是可以从视图库中移出来的，然后可以使用提供者消费者模式把状态重新连接回视图库。重新设计在我看来，重写是有其必要性的，至少有以下个方面可以改进得更友好。 Redux 学习起来很困难？写起代码来很啰嗦？一起来看看 Rematch 的作者对 Redux 的思考和简化吧~ 原文：《Redesigning Redux》, Shawn McKay 都过...

    kidsamong 评论0 收藏0

  • React生态，dva源码阅读

    摘要：下面会从浅到深，淡淡在阅读源码过程中自己的理解。分拆子页面后，每一个子页面对应一个文件。总结上面就是最早版本的源码，很简洁的使用了等其目的也很简单简化相关生态的繁琐逻辑参考源码地址   dva的思想还是很不错的，大大提升了开发效率，dva集成了Redux以及Redux的中间件Redux-saga,以及React-router等等。得益于Redux的状态管理,以及Redux-saga中...

    bergwhite 评论0 收藏0

  • React生态，dva源码阅读

    摘要：下面会从浅到深，淡淡在阅读源码过程中自己的理解。分拆子页面后，每一个子页面对应一个文件。总结上面就是最早版本的源码，很简洁的使用了等其目的也很简单简化相关生态的繁琐逻辑参考源码地址   dva的思想还是很不错的，大大提升了开发效率，dva集成了Redux以及Redux的中间件Redux-saga,以及React-router等等。得益于Redux的状态管理,以及Redux-saga中...

    txgcwm 评论0 收藏0

  • React生态，dva源码阅读

    摘要：下面会从浅到深，淡淡在阅读源码过程中自己的理解。分拆子页面后，每一个子页面对应一个文件。总结上面就是最早版本的源码，很简洁的使用了等其目的也很简单简化相关生态的繁琐逻辑参考源码地址   dva的思想还是很不错的，大大提升了开发效率，dva集成了Redux以及Redux的中间件Redux-saga,以及React-router等等。得益于Redux的状态管理,以及Redux-saga中...

    harryhappy 评论0 收藏0

  • redux-saga框架使用详解及Demo教程

    摘要：通过创建将所有的异步操作逻辑收集在一个地方集中处理，可以用来代替中间件。 redux-saga框架使用详解及Demo教程 前面我们讲解过redux框架和dva框架的基本使用，因为dva框架中effects模块设计到了redux-saga中的知识点，可能有的同学们会用dva框架，但是对redux-saga又不是很熟悉，今天我们就来简单的讲解下saga框架的主要API和如何配合redux框...

    Nosee 评论0 收藏0

发表评论

登陆后可评论

0条评论

WalkerXu

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<