redux自我理解

了解redux

什么是redux

Redux是一个流行的JavaScript框架，为应用程序提供一个可预测的状态容器。Redux基于简化版本的Flux框架，Flux是Facebook开发的一个框架。在标准的MVC框架中，数据可以在UI组件和存储之间双向流动，而Redux严格限制了数据只能在一个方向上流动。

使用redux的目的

在react中组件与组件之间的通信很麻烦，于是借用redux进行第三方的通信，通过把数据存储在store里，实现各个组件间快速通信

redux基础

1. 核心

state：普通对象 action：JS 普通对象，用来描述发生了什么，store 数据的唯一来源 reducer：把 action 和
state 串起来。接收 state 和 action 作为参数，并返回新的 state 的函数。

2. 三大原则

单一数据源：只存在唯一一个store state只读：唯一改变 state 的方法就是触发 action 使用纯函数进行修改：reducer

3. 主要组件

• action

我们知道State的变化会导致View的变化，但是用户接触不到State，只能接触到view。
Action就是从View发出通知，State接受并表示变化。
Action是一个对象，其中的 type 属性是必须的，表示Action的名称。

const action = {
  type: 'ADD',
}

• reducer

描述如何响应action更新state

• store

Store就是保存数据的地方，可以理解成一个容器。整个应用只能有一个store。
维持应用的 state； 提供 getState() 方法获取 state； 提供 dispatch(action) 方法更新 state；
通过 subscribe(listener) 注册监听器; 通过 subscribe(listener) 返回的函数注销监听器。

• store.dispatch():

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

import { createStore } from 'redux';
const store = createStore(fn);
const action = {
  type: 'ADD',
  value: '新数据'
}
store.dispatch(action)

store.dispatch接受一个 Action 对象作为参数，将它发送出去。

Reducer

Store收到Action后，必须给一个新的State，这样View才会更新。这种计算过程叫做Reducer。
Reducer是一个函数，接受State、Action作为参数，返回一个新的State。

const reducer = (state = 0, action)=>{
    switch (action.type) {
        case 'ADD':
            return state + 1
        case 'DEL':
            return state - 1
        default:
            return state;
    }
}
const store = createStore(reducer)

由于Reducer是纯函数，它里面的State都是一样的，这样View也是一样的，所以Reducer函数里面不能改变State，必须返回一个新的State。

扫描二维码关注公众号，回复： 11082962 查看本文章

function reducer(state, action) {
  return Object.assign({}, state);
}