ReactNative之Redux入门(3)- redux入门

7人阅读 评论(0) 收藏 举报
分类:
注:本教程针对于有过React/ReactNative开发经验的人群。

英文原版:http://redux.js.org/

参阅文档和阮一峰老师的网络日志进行学习。

可能在第一节的学习中对Redux的基本概念看完之后都不了解。现在呢再写完Demo后再看一遍,将会恍然大悟。

摘抄并简单介绍Redux的基本概念工作原理。

1.store
Store就是保存数据的地方,可以看做成一个容器。整个应用只有一个Store。Redux提供createStore用来创建Store。
2.state
Store保存的所有数据,每个都是state。Store对象包含所有的数据。如果想要得到摸个时点的数据,就要对store生成快照,就叫做state,当前时刻的state可以通过store.getState()拿到。
Redux规定,一个state对应一个View。state变view变,反之亦然。
3.Action
State的变化,会导致View的变化。但是,用户是拿不到state的,用户只能接触到View。所以state的变化一定是View导致的。
View如何导致state发生变化呢?
View通过Action发出通知,将数据送达Store,再由Store改变state,state改变必然会引起View的改变。
4.ActionCreator
View通过Action发送消息,每发送一个不同的Action,都要创建一个Action。所以要定义ActionCreator函数。并通过ActionType来判断。
5.store.dispatch()
dispatch是View发出Action的唯一方法。
dispacth接收一个Action参数,并将它发送出去。
6.reducer
Store接收到Action以后,会给出一个新的state,这样View才能发生变化,这种state的计算过程就叫做reducer。
当dispatch发送来action的时候,会自动触发reducer的执行,为什么会自动触发呢?因为在创建Store时传入了reducer。
reducer是纯函数,纯函数就是拿到同样的数据会返回同样的输出。

由于整个应用只有一个Store所以必然导致reducer跟着庞大,所以就要对reducer进行拆分。拆分方法见Demo。
7.store.subscribe
Store 允许使用store.subscribe方法设置监听函数,一旦 State 发生变化,就自动执行这个函数。
import { createStore } from 'redux';const store = createStore(reducer);store.subscribe(listener);
显然,只要把 View 的更新函数(对于 React 项目,就是组件的render方法或setState方法)放入listen,就会实现 View 的自动渲染。
store.subscribe方法返回一个函数,调用这个函数就可以解除监听。
let unsubscribe = store.subscribe(() => console.log(store.getState()));unsubscribe();

工作原理图解


查看评论

React + Redux 入门(一):抛开 React 学 Redux

https://yq.aliyun.com/articles/57667?do=login redux简介 Redux 是一个改变状态(state)的模型,这个模型通过一个单向操作的方...
  • oMingZi12345678
  • oMingZi12345678
  • 2016-09-11 23:41:45
  • 1320

实操《深入浅出React和Redux》第四期--react-redux

入到第四期, 代码大大简化, 但如果没有前面的演化过程, 一定让人蒙圈~~ 三个主要文件: index.js import React from...
  • qq_36510261
  • qq_36510261
  • 2017-12-04 16:34:40
  • 286

Redux与纯JS入门实例讲解

Redux与纯JS入门实例讲解 学习Redux可能是一个噩梦,我猜应该每个人都读过那篇”You Might Not Need Redux”然后扔掉了手中的电脑。如果一来就是npm install ...
  • a153375250
  • a153375250
  • 2016-11-28 09:46:46
  • 2589

Redux的基础使用入门(一)

基本概念和API redux: 商店:store,存放state的容器 状态:state,就是应用中需要使用的数据 动作:ac...
  • keji_123
  • keji_123
  • 2018-02-02 10:19:01
  • 41

《React-Native系列》24、 结合Demo学习Redux框架

8月的最后一天了,那就打响最后一炮吧!我们介绍了Flux框架,我们打算在接下来的项目里使用Redux框架,这两天简单学习了下Redux。打算结合一个Demo来讲解。 还是先来说说概念吧。 Redux ...
  • hsbirenjie
  • hsbirenjie
  • 2016-08-31 23:06:23
  • 5649

Redux入门指南

简介 redux是可预测的JS应用状态容器。 状态 现在有一个开关按钮组件ToggleButton,而按钮的on/off就是这个组件的状态。一个应用里面会有大量的组件,而管理以及传递这些组件的状态,...
  • u013063153
  • u013063153
  • 2016-09-03 17:09:03
  • 405

ReactNative-Redux实际应用

Redux刚开始我也是一头雾水,文章看着也是懵懵懂懂,经过多方查看别人写的文章,自己在动手实现在回头看别人写的也就那么回事。这里还是使用干活集中营的妹子接口来真实操作下Redux,建议一定要动手写写,...
  • u014360817
  • u014360817
  • 2016-10-13 22:37:18
  • 3364

Redux-saga 基础学习

Redux-saga 基础学习 参考: https://juejin.im/post/58eb4100ac502e006c45d5c9 https://yanqiw.github.io/re...
  • u011486491
  • u011486491
  • 2018-01-25 15:21:04
  • 90

react-native redux debug

react-native redux debuga solution from redux debug in react-native.refshttps://libraries.io/github/...
  • li905663280
  • li905663280
  • 2016-08-21 10:14:07
  • 946

Redux入门

简介 Redux是一个非常有用的框架,他主要解决状态的统一管理问题。而React则将所有组件视为状态机,所以Redux可以看作是一个React的数据管理中心。但需要注意,并不是必须用Redux来管理数...
  • mafan121
  • mafan121
  • 2017-05-25 08:55:48
  • 432
    个人资料
    持之以恒
    等级:
    访问量: 1万+
    积分: 499
    排名: 10万+
    文章存档
    最新评论