redux

1、Redux简介

在Redux中，最为核心的概念就是 state、action 、reducer 以及 store。

 

1、action：动作

function addItem(text) {
  return {
    type: types.ADD_ITEM,
    text
  }
}

2、state： 

状态

3、reducer

Reducer 是一个普通的回调函数。

当它被Redux调用的时候会为他传递两个参数State 和 Action。

Reducer会根据 Action 的type来对旧的 State 进行操作。返回新的State。

看起来是下面这样的：

 

/**
 * 添加
 *
 * @param {String} 添加的文字
 *
 * @return {Object} 将要添加的数据
 */
let createItem = text => {
  let time = Date.now();

  return {
    id: Math.random().toString(36).split('.').join(''),
    addTime: time,
    updateTime: time,
    status: false,
    text
  }
}

/**
 * Reducer
 *
 * @param State
 * @param Action
 *
 * @return new State
 */
let reducer = (state = [], action) => {
  switch (action.type) {
    case ADD_ITEM:
      return [createItem(action.text), ...state]

    default:
      return state
  }
}

　　

store：

提供方法去操作数据， 一个应用只有一个Store

let store = createStore(rootReducers, initialState)

store有四个方法。

1. getState： 获取应用当前State。
2. subscribe：添加一个变化监听器。
3. dispatch：分发 action。修改State。
4. replaceReducer：替换 store 当前用来处理 state 的 reducer。

 

 

 

 

简单的说，Redux所想表达的就是这些内容，所以它的学习曲线不会很陡。对于程序员来讲，阅读代码会比阅读文字舒服，那么我们如何简单地用redux实现