Redux学习简述

来源:互联网 发布:mac和windows双系统 编辑:程序博客网 时间:2024/05/18 00:38

简述redux(1)


概念: 是一个有用的架构,应用场景一般为:多交互、多数据源。如:
  • 某个组件的状态需要共享
  • 某个状态需要在任何地方可以看到
  • 一个组件需要改变全局状态。
  • 一个组件需要改变另一个组件的状态
设计思想
  1. Web 应用是一个状态机,视图与状态是一一对应的。
  2. 所有的状态,保存在一个对象里面。
API
  • store:保存数据的地方,可以看成是一个容器,整个应用只有一个store,Redux提供了createStore函数,用于生成Store对象。

    import { createStore } from 'redux';const store = createStore(fn);
  • state:store度下你给包含所有数据,如果想得到某个时点的数据,就要对store生成快照,这种时点的数据集合就叫做State,当前时刻的state可以通过state.getState()拿到。

    import { createStore } from 'redux';const store = createStore(fn);const state = store.getState();
  • action:State 的变化,会导致 View 的变化。State 的变化必须是 View 导致的。Action 就是 View 发出的通知,表示 State 应该要发生变化了。Action 是一个对象。其中的type属性是必须的,表示 Action 的名称。

    const action = {  type: 'ADD_TODO',  payload: 'Learn Redux'};
  • Action Creator:生成多个action。

  • 基本概要图解
    这里写图片描述

这里写图片描述

  • 待续