初识redux

xumenger 发布于2019-08-22 16:13 / 646人阅读

摘要：主要用于构建，很多人认为是中的视图。函数接受另一个函数作为参数，返回新生成的对象的变化，会导致的变化。用户无法直接改变只能触发上绑定的事件。表示应该要发生变化了。允许使用方法设置监听函数，一旦发生变化，就自动执行这个函数。

什么是react

React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。

为什么需要redux

react 只涉及 view 层, React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。有两个方面，它没涉及。

代码结构

组件之间通信

而 redux正好能解决这两件事

redux工作流

1.Store

Store 就是保存数据的地方。

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

const state = store.getState();

createStore(reduces, globalState)
createStore函数接受另一个函数作为参数，返回新生成的 Store 对象

2.Action

State 的变化，会导致 View 的变化。用户无法直接改变State, 只能触发上绑定的事件。Action 就是 View 发出，表示 State 应该要发生变化了。

const action = {
  type: "ADD_TODO",
  payload: "Learn Redux"
};

3.Action Creator

const ADD_TODO = "添加 TODO";

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

const action = addTodo("Learn Redux");

定义一个函数来生成 Action，这个函数就叫 Action Creator。

4.store.dispatch()

store.dispatch()是 View 发出 Action 的唯一方法。表示 State 应该要发生变化了。

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

store.dispatch({
  type: "ADD_TODO",
  payload: "Learn Redux"
});

5.Reducer

Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。

6.store.subscribe()

Store 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。

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

一个极简的 redux 例子

simplest-redux-examp(https://github.com/jackielii/...

import React, { Component } from "react"
import PropTypes from "prop-types"
import ReactDOM from "react-dom"
import { createStore } from "redux"
import { Provider, connect } from "react-redux"

// React 组件
class Counter extends Component {
  render() {
    const { value, onIncreaseClick } = this.props
    return (
      
        {value}
        
      
    )
  }
}
// 属性验证
Counter.propTypes = {
  value: PropTypes.number.isRequired,
  onIncreaseClick: PropTypes.func.isRequired
}

// Action
const increaseAction = { type: "increase" }

// Reducer 一个(state, action) => new state
function counter(state = { count: 0 }, action) {
  const count = state.count
  switch (action.type) {
    case "increase":
      return { count: count + 1 }
    default:
      return state
  }
}

// Store 
const store = createStore(counter)

// Map Redux state to component props
// 传入组件的属性
function mapStateToProps(state) {
  return {
    value: state.count
  }
}

// Map Redux actions to component props
// 组件需要使用props传入的来  dispatch
function mapDispatchToProps(dispatch) {
  return {
    onIncreaseClick: () => dispatch(increaseAction)
  }
}

// Connected Component
const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter)

ReactDOM.render(
  
    
  ,
  document.getElementById("root")
)

参考

Redux 入门教程-阮一峰

云服务器 GPU云服务器 docker初识初识关系数据库 Redux redux源码

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

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

angular - 收藏集 - 掘金

摘要：如何在中使用动画前端掘金本文讲一下中动画应用的部分。与的快速入门指南推荐前端掘金是非常棒的框架，能够创建功能强大，动态功能的。自发布以来，已经广泛应用于开发中。如何在 Angular 中使用动画 - 前端 - 掘金本文讲一下Angular中动画应用的部分。首先，Angular本生不提供动画机制，需要在项目中加入Angular插件模块ngAnimate才能完成Angular的动画机制...

AlexTuan 2019-08-20 17:19 评论0 收藏0
初识React(9)：dva简介

摘要：初始值，优先级低于传给的，如下此时，在后为以格式定义。用于处理同步操作，唯一可以修改的地方。由触发，可以触发，可以和服务器交互，可以获取全局的数据等等。取消注册，清理和。如果没有返回函数，使用会给予警告注册路由表。前言 dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以...

keke 2019-08-23 14:08 评论0 收藏0
2017-08-30 前端日报

摘要：前端日报精选精读个最佳特性翻译轻量级函数式编程第章组合函数之组件类型写的姿势中文周二放送面试题详解知乎专栏译原生值得学习吗答案是肯定的掘金个超赞的视觉效果众成翻译布局时常见总结腾讯前端团队社区归档打地鼠入门学习书籍 2017-08-30 前端日报精选精读《Web fonts: when you need them, when you don’t》10个最佳ES6特性翻译 -《Jav...

weizx 2019-08-20 19:03 评论0 收藏0
[源码阅读]高性能和可扩展的React-Redux

摘要：到主菜了，先看它的一看，我们应该有个猜测，这货是个高阶函数。可能有点绕，但就是这么一个个高阶函数组成的，后面会详细说。定义了一个处理函数和高阶函数执行次的方法，这个方法比上面的复杂在于它需要检测参数是否订阅了。注意：文章很长，只想了解逻辑而不深入的，可以直接跳到总结部分。初识首先，从它暴露对外的API开始 ReactReduxContext /* 提供了 React.creat...

shuibo 2019-08-26 13:22 评论0 收藏0