一、redux是什么

简略来说，redux就是JavaScript状态容器，提供可预测化的状态治理。也就是能够了解为state的升级版，不再依赖于组件本身的管制，能够独立于组件而存在。

二、为什么须要应用redux

从组件的角度看，如果你的利用有以下场景，能够思考应用Redux

  • 某个组件的状态，须要共享
  • 某个组件状态须要在任何中央都能够拿到
  • 一个组件须要扭转全局状态
  • 一个组件须要扭转另一个组件的状态

产生下面状况是，如果不应用Redux或者其余状态管理工具，不依照肯定法则解决状态的读写，代码很快会变成一团乱麻。你须要一种机制，能够在同一个中央查问状态、改拜年状态、流传状态的变动。

三、Action是什么

1.Action 概念

Action是把数据从利用传到store的有效载荷。它是store数据的惟一起源。一般来说你会通过store.dispacth()将action传到store。

增加新todo工作的action是这样的：

const ADD_TODO = 'ADD_TODO'{  type: ADD_TODO,  text: 'Build my first Redux app'}

Action 实质上是 JavaScript 一般对象。咱们约定，action 内必须应用一个字符串类型的 type 字段来示意将要执行的动作。少数状况下，type 会被定义成字符串常量。当利用规模越来越大时，倡议应用独自的模块或文件来寄存 action。

2.Action 创立函数

Action 创立函数就是生成action的办法，"action"和"action 创立函数"这两个概念很容易混同，所以在应用的时候最好留神辨别。

在 Redux 中的 action 创立函数只是简略的返回一个 action:

function addTodo(text) {  return {    type: ADD_TODO,    text  }}

四、Reducer是什么

1.Reducer概念

Reducers 指定了利用状态的变动如何响应 actions 并发送到 store 的，记住 actions 只是形容了_有事件产生了_这一事实，并没有形容利用如何更新 state。其实说白了，Reducer就是一个纯函数，承受旧的state和action，返回新的state。

(previousState, action) => newState

2.Reducer要留神的点

特地须要留神的一点是reducer必须是一个纯函数，也就是说永远不要reducer中做上面的操作：

  • 批改传入的参数
  • 执行有副作用的操作，如API 申请和路由跳转
  • 调用非纯函数，如Date.now()或Math.random()

总之，就一句话，reducer肯定要放弃污浊，只有传入的参数雷同，返回计算失去的下一个state就肯定雷同，没有非凡状况、没有副作用、没有API申请、没有变量批改，单纯执行计算。

3.如何定义Reducer

这是官网的一个简略的例子:

//reducerfunction counter(state = 0, action) {  switch (action.type) {  case 'INCREMENT':    return state + 1  case 'DECREMENT':    return state - 1  default:    return state  }}

因为reducer切实是会依据不同的action会返回不同的state，所以它的款式十分的多种多样，所以在这里只是简略的介绍官网给出的一个非常简单的例子而已。

4.combineReducers(reducers)

(1)随着利用变得越来越简单，能够思考将 reducer 函数 拆分成多个独自的函数，拆分后的每个函数负责独立治理 state 的一部分。

(2)combineReducers 辅助函数的作用是，把一个由多个不同 reducer 函数作为 value 的 object，合并成一个最终的 reducer 函数，而后就能够对这个 reducer 调用 createStore 办法。

官网的实例：

rootReducer = combineReducers({potato: potatoReducer, tomato: tomatoReducer})// rootReducer 将返回如下的 state 对象{  potato: {    // ... potatoes, 和一些其余由 potatoReducer 治理的 state 对象 ...  },  tomato: {    // ... tomatoes, 和一些其余由 tomatoReducer 治理的 state 对象，比如说 sauce 属性 ...  }}

合并后的reducer能够调用各个子reducer，并将它们返回的后果合并成一个state对象。由 combineReducers() 返回的 state 对象，会将传入的每个 reducer 返回的 state 按其传递给 combineReducers() 时对应的 key 进行命名。

(3)combineReducers的返回值：（Function）一个调用reducers对象里所有reducer的reducer，并且结构一个与reducers对象构造雷同的state对象。

(4)每个传入 combineReducers 的 reducer 都需满足以下规定：

  • 所有未匹配到的action，必须把它接管到的第一个参数也就是那个state一成不变返回；
  • 永远不能返回undefined。当过早return是非常容易犯这个谬误，为了防止错误扩散，遇到这种状况时combineReducers会抛出异样；
  • 如果传入的state就是undefined，肯定要返回对应的reducer的初始state。依据上一条规定，初始state禁止应用undefined。应用ES6的默认参数至语法来设置state很容易，但你也能够手动查看第一个参数是否为undefined。

五、Store是什么

1.Store的概念

依照官网的说法，Store就是把action、reducer分割在一起的对象，Store有以下的职责：

  • 维持利用的state；
  • 提供 getState() 办法获取 state；
  • 提供 dispatch(action) 办法更新 state；
  • 通过 subscribe(listener) 注册监听器;
  • 通过 subscribe(listener) 返回的函数登记监听器。

要留神的一点是每一个Redux利用只有一个store。

2.如何创立store

创立store十分的简略，只须要咱们把之前应用combineReducers（）生成的reducer导入即可，并传递createStore()

import { createStore } from 'redux'import todoApp from './reducers'let store = createStore(todoApp)

createStore() 的第二个参数是可选的, 用于设置 state 初始状态。这对开发同构利用时十分有用，服务器端 redux 利用的 state 构造能够与客户端保持一致, 那么客户端能够将从网络接管到的服务端 state 间接用于本地数据初始化。

let store = createStore(todoApp, window.STATE_FROM_SERVER)

六、简略实现一个redux

在最近这段时间学习redux的过程中，看了好几遍官网的文档之后还是感觉本人对redux的理解停留在表象，只是晓得action、reducer、store别离是一个什么货色，怎么应用它们，然而却对其中的原理并不理解，于是我就去GitHub上将redux源码clone下来剖析了一下，筹备下一次写一篇对于redux的源码原理剖析的文章（等我把源码吃透了先）。那么当初就先应用js来实现一个简略的redux吧。

上面实现的redux次要有如下的几个性能：

  • 获取利用的state
  • 发送action
  • 监听state的变动

先来定义一个store：

const store = {  state: {}, // 全局惟一的state，外部变量，通过getState()获取  listeners: [], // listeners，用来诸如视图更新的操作  dispatch: () => {}, // 散发action  subscribe: () => {}, // 用来订阅state变动  getState: () => {}, // 获取state}

手动实现一个createStore：

const createStore = (reducer, initialState) => {  // internal variables  const store = {};  store.state = initialState;  store.listeners = [];    // api-subscribe  store.subscribe = (listener) => {    store.listeners.push(listener);  };  // api-dispatch  store.dispatch = (action) => {    store.state = reducer(store.state, action);    store.listeners.forEach(listener => listener());  };    // api-getState  store.getState = () => store.state;    return store;};

接下来，咱们试一下它的成果：

// reducerfunction counter(state = 0, action) {  switch (action.type) {  case 'INCREMENT':    return state + 1  case 'DECREMENT':    return state - 1  default:    return state  }}let store = createStore(counter)store.subscribe(() =>  console.log(store.getState()))store.dispatch({ type: 'INCREMENT' })// 1store.dispatch({ type: 'INCREMENT' })// 2store.dispatch({ type: 'DECREMENT' })// 1

发现曾经实现redux最根本的性能了。

总之，我感觉学习一个新的货色最好的方法就是去读一下它的源码，而后在本人理解的根底下来手动实现一个相似的货色，我感觉应该会对了解这个货色的原理很有帮忙。