Redux简介

Redux是JavaScript状态容器，用于管理状态。所谓状态就是程序中的一些特定意义数据。如在程序中使用loading表示加载状态。

Redux是一个单纯的状态管理工具，不限制使用环境和框架，如你可以和vue.js，React等框架一起使用。

Redux开发思路和Flux一样，区别在于只有一个store(如果你不知道是什么，没关系，接下来说)。

名词介绍(看不懂也没关系)

state： 描述的是拥有固定结构的对象。也是在程序中操作的内容。更直白的说就是我们要操作的数据。

store：就是一个数据模型，维护着多个state以及提供一些操作state的方法，当然提供的方法并不能直接操作state（数据），需要结合action， reducer。

reducer：一个可以操作state的函数，在dispatch一个action的时候Redux会自动的去调用这个函数。

action： 一个对象，通过dispatch告诉reducer你要做什么操作。

dispatch：一个store提供的方法，用于派发action。

工作流就像这样：createStore(reducer) ——>dispatch(action)——>reducer(state, action)——>state updated

看表像

state： 他可能像这样

[{
    id: 1,
    title: "关于别人前端面试的问题的回答(CSS篇)"，
    url: "http://www.jianshu.com/p/4a11f07791d3"
}, {
    id: 2,
    title: "“浏览器工作原理:现代网络浏览器幕后揭秘”文章分析"，
    url: "http://www.jianshu.com/p/0b75dbf7af36"
}]

store：他外表长这样

store 对象

reducer：他应该长成这样

// 函数名字随便哈，看自己心情，只要你最后把他给store就行
function FUNCTIONNAME (state, action) {
  
}

action： 他可以长这样

{
  type: 'add article', 
  article: {
    id: 3,
    title: '从表象理解Redux',
    url: 'http://www.jianshu.com/p/0b75dbf7af36'
  }
}

dispatch：他可以这样写dispatch(action)。

于是他整个可以是这个样子

整个流程代码

注意在13行的log,输出是这样，看倒数第二个Object，因为在14行返回的是一个空对象，所有新的state成了空对象，而第一个Array则因为一开始state是undefined，所以默认参数生效。

log

那么我们修改代码为这样

...
function addArticle (state = [], action) {
  return action.type === 'add article' ? [...state, action.article] : [...state] // Redux文档说不能再原来的state基础上修改，必须返回修的state，至于修改后会怎么样，你可以试试
}
function reducer (state = {articles}, action) {
  console.log(state, action.type)
  return {  // 你可以在这个对象中建你需要的那么多个属性，然后分别写action就ok
    articles: addArticle(state.articles, action)
  }
}
...
store.dispatch({type: 'nothing to do'}) // 最后一行，检查结果

结果是这样

修改后log

那么他该怎么和项目结合呢

其实很简单啊，把通过createStore()函数创建的store通过参数传就是了，于是程序就拥有了一个store了，而且store在应用生命周期内一直存在，哪里都可以获取到哦。

总结

Redux还有很多的文档没有看完，只看到了异步action，准备先这样用着了，后边再来补一下把，感觉文档基础部分写的有些太罗嗦了，而且篇幅大长，导致很多时候概念和用法都是模模糊糊，当然还是推荐大家看官方文档，虽然啰哩啰嗦，但是也有讲到很多细节以及Redux的思想。

我觉得Redux的工作方式很是值得我们在项目中借鉴，让特定的程序做特定的事情，如dispath就是发起一个action，至于action是什么不管，而action只负责告诉reducer做什么，至于怎么做也不管。我们不仅仅要程序中函数职责单一，程序的业务也应该尽量单一。额，好像说了半天成了模块化了。。。

最后，去除所有中间流程看Redux工作，就像这样(当然这是不恰当的，只是为了方便理解)：

create action
create reducer // 这两个顺序没什么关系

createStore(reducer)  // 把reducer交给store
do {
  dispath(action) // 你写的程序做
  reducer(state, action) // store做，你不需要管，只要你的reducer没问题就OK
} while (1)

我的感受

使用Redux减轻了项目中的状态管理，至少状态的管理变得清晰了，在程序中我们只需要知道某个位置做了什么，而不用考虑他怎么做的，会不会对其他地方有什么影响(如果有影响，那一定是state定义有问题，或者业务没理清楚)；同时Redux也让组件之间的数据传递变得更加简单。