redux

作者: 江疏影子 | 来源:发表于2018-07-18 21:00 被阅读0次

    1.Store 存放数据的地方,可以看成一个容器,整个应用只有一个Store,Redux提供了一个createStore函数来生成Store。

    2.State 对象包含所有数据。如果想要获取,可以通过store.getState()来获取。

    3.Action State的变化,会导致View的变化,但是用户只能通过View来改变‘状态’,所以State的变化必须是View导致的,而Action的作用就是View发出的通知,表示State应该要发生变化了。

    Action是一个对象,其中type属性是必须的,表示Action的名称,其他属性可以自由设置

    可以这样理解,Action 描述当前发生的事情。改变 State 的唯一办法,就是使用 Action。它会运送数据到 Store。

    4.Action Creator 如果View要发送多少种消息,就会有多少种Action,可以定义一个函数来生成Action

    addTodo函数就是一个 Action Creator。

    5.store.dispatch() 是View发出Action的唯一方法

    因为store是把它们联系到一起的对象,store有以下职责:

    - 维持应用的 state;

    - 提供 getState() 方法获取 state;

    - 提供 dispatch(action) 触发reducers方法更新 state;

    - 通过subscribe(listener) 注册监听器;

    - 通过 subscribe(listener) 返回的函数注销监听器。

    所以结合起来就可以直接写成

    6.Reducer Store收到Action以后,必须给出一个新的State,这样View才会更新,这种State的计算过程就要Reducer。Reducer是一个函数,它接受Action和当前State作为参数,返回一个新的State

    上面代码中,reducer函数收到名为ADD的 Action 以后,就返回一个新的 State

    但在实际应用中,Reducer函数不需要像上面手动调用,store.dispatch方法会出发Reducer的自动执行,为此就需要让Store知道Reducer函数,那就是在生成Store的时候将Reducer传入createStore方法中。

    以后每当store.dispatch发送过来一个新的 Action,就会自动调用 Reducer,得到新的 State。

    7.纯函数 Reducer函数是一个纯函数(相同的输入就必须会有相同的输出)

    纯函数是函数式编程的概念,必须遵守以下一些约束。

    · 不得改写参数

    · 不能调用系统 I/O 的API

    · 不能调用Date.now()或者Math.random()等不纯的方法,因为每次会得到不一样的结果。

    所以希望最好把 State 对象设成只读。你没法改变它,要得到新的 State,唯一办法就是生成一个新对象。这样的好处是,任何时候,与某个 View 对应的 State 总是一个不变的对象。

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

    可以将View的更新函数(组件的render方法或者setState)放入listener中,会实现view的自动渲染

    store.subscribe方法返回一个函数,调用这个函数就可以解除监听。

    let   unsubscribe=store.subscribe(()=>

            console.log(store.getState())

    );

    unsubscribe();

    以上就是整个流程,下面是官方的流程图

    首先,用户发出Action 

    store.dispatch(action);

    然后,Store自动调用Reducer,并且传入两个参数:当前state和收到的Action,返回新的State

    let   nextState=todoApp(previousState,action);

    如果State一旦有变化,Store就会调用监听函数

    store.subscribe(listener);

    redux中文文档网站:http://cn.redux.js.org/index.html

    以下为一个redux最简单最简单最简单的一个例子,记录方便理解。

    第一步:创建一个store.js

    将第二步的reducer传入到createStore中

    第二步:创建reducer.js

    以上两步完成之后可以在我们需要测试的页面之中通过dispatch方法将action发送到reducer函数中,进行状态的更新。

    以下提供一个最简单的例子:

    这是目录,Component和Redux同级

    首先在Redux文件夹下建立Reducer和Store,然后打算是在Home页面点击一个按钮将文本框的值传到My页面(这就是一个action),然后在Home页面dispatch出去。在reducer写好相关的数据处理,然后在My页面获取就可以了。

    这是store的内容 Home页面 reducer处理 在My里面只需要获取就可以了

    这就是一个无敌简单的redux

    相关文章

      网友评论

          本文标题:redux

          本文链接:https://www.haomeiwen.com/subject/rppapftx.html