初识Redux

Redux的基本元素组成
  • Action
    本质上就是普通的JavaScript对象。我们约定,action内使用一个字符串类型的type字段来表示将要执行的动作。例如:
    {type: 'INCREMENT'} 和 {type: 'DECREMENT'} 都是action。
  • Reducer
    Reducer是形式为(state, action) => state的纯函数,描述了action如何把state转变成下一个state。例如:
    function counter (state=0, action) {
    switch (action.type){
    case 'INCREMENT':
    return state + 1;
    case 'DECREMENT':
    return state - 1;
    default:
    return state;
    }
    }
  • Store
    Store是一个全局的对象,将action和reducer以及state联系到一起。Store有以下职能:
  • 维持应用的state
  • 提供getState()方法获取state
  • 提供dispatch(action)方法更新state
  • 通过subscribe(listener)注册监听器

创建一个store
//创建store需要从redux包中导入createStore这个方法
import { createStore } from 'redux';
//使用reducer纯函数counter作为第一个参数创建store
let store = createStore(counter);
//第二个参数为state的初始值
let store = createStore(counter, 100);

  • 发起action
    store.dispatch({ type: 'INCREMENT'});
    store.dispatch({ type: 'DECREMENT'});
    当发起action后,就将action传进了store中,使用reducer函数(这里是counter)更新state值.
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 简书 i蒹葭从风转载请注明原创出处,谢谢!如果读完觉得有收获的话,欢迎点赞加关注 简单介绍一下redux 的一些术...
    蒹葭de阅读 530评论 0 1
  • 学习必备要点: 首先弄明白,Redux在使用React开发应用时,起到什么作用——状态集中管理 弄清楚Redux是...
    贺贺v5阅读 8,953评论 10 58
  • http://gaearon.github.io/redux/index.html ,文档在 http://rac...
    jacobbubu阅读 80,060评论 35 198
  • 该文章仅作为个人笔记在使用redux的时候,避免不了的就是创建各种action和actionCreator等,有没...
    Tim张阅读 3,441评论 3 1
  • 一、认识Redux 安装 npm install --save redux npm install --save ...
    SunshineMS阅读 394评论 0 2