redux入门

Redux是什么

Redux对于JavaScript应用而言是一个可预测状态的容器。换言之，它是一个应用数据流框架，而不是传统的像underscore.js或者AngularJs那样的库或者框架。

Redux最主要是用作应用状态的管理。简言之，Redux用一个单独的常量状态树（对象）保存这一整个应用的状态，这个对象不能直接被改变。当一些数据变化了，一个新的对象就会被创建（使用actions和reducers）。

应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。惟一改变 state 的办法是触发 action，一个描述发生什么的对象。为了描述 action 如何改变 state 树，你需要编写 reducers (单向数据流)。

Redux的优点

预测始终有一个准确的数据源，就是store, 对于如何将actions以及应用的其他部分和当前的状态同步可以做到绝不混乱。
维护具备可预测结果的性质和严格的组织结构让代码更容易维护。
组织对代码应该如何组织更加严苛，这使代码更加一致，对团队协作更加容易。
测试编写可测试代码的首要准则就是编写可以仅做一件事并且独立的小函数。Redux的代码几乎全部都是这样的函数：短小、纯粹、分离
服务端渲染可以带来更好的用户体验并且有助于搜索引擎优化，尤其是对于首次渲染。仅仅是把服务端创建的store传递给客户端就可以。
开发者工具开发者可以实时跟踪在应用中正在发生的一切，从actions到状态的改变。
社区与生态圈存在很多支持Redux的社区，使它能够吸引更多的人来使用。

Redux的核心概念

1. action

简单地，Actions就是事件。Actions传递来自这个应用（用户接口，内部事件比如API调用和表单提交）的数据给store。store只获取来自Actions的信息。内部Actions就是简单的具有一个type属性（通常是常量）的JavaScript对象，这个对象描述了action的类型以及传递给store的负载信息。

{
  type: LOGIN_FORM_SUBMIT,
  payload: {username: 'alex', password: '123456'}
}

Actions通过action生成器创建，它们仅仅是是返回action的函数。

function authUser(form) {
  return {
    type: LOGIN_FORM_SUBMIT,
    payload: form 
  }
}

要在应用中的任何地方调用actions很容易，使用dispatch方法。

1	dispatch(authUser(form));

2. reducers

在函数式JavaScript中reducer基于数组reduce方法，接收一个回调（reducer）让你从多个值中获得单个值，整数和，或者一个一系列值的累积。在Redux中，reducer就是获得这个应用的当前状态和事件然后返回一个新状态的函数。理解reducer是怎样工作的至关重要，因为它们完成大部分工作。这是一个非常简单的reducer，通过获取当前state和一个action作为参数，再返回下一个state：

function handleAuth(state, action) {
  return _.assign({}, state, {
    auth: action.payload  
  });
}

对于更多复杂的项目，使用Redux提供的combineReducers()实例是必要的（推荐）。它把在这个应用中所有的reducer结合在一起成为单个索引reducer。每一个reducer负责它自己那部分应用的状态，这个状态参数和其他reducer的不一样。combineReducers()实例使文件结构更容易维护。

如果一个对象（state）只改变一些值，Redux就创建一个新的对象，那些没有改变的值将会指向旧的对象而且新的值将会被创建。这对性能是极好的。为了让它更有效率你可以添加 Immutable.js

const rootReducer = combineReducers({
  handleAuth: handleAuth,
  editProfile: editProfile,
  changePassword: changePassword
});

3. store

Store对象保存应用的状态并提供一些帮助方法来存取状态，分发状态以及注册监听。全部state由一个store来表示。任何action通过reducer返回一个新的状态对象。这就使得Redux非常简单以及可预测。

import { createStore } from 'redux';
let store = createStore(rootReducer); // 这里的rootReducer就是上面创建的
let authInfo = {username: 'alex', password: '123456'};
store.dispatch(authUser(authInfo));