Day29 Redx初步介绍

使用目的

随着时代的进步，人们对单一页面的要求日渐复杂化，从过去的静态页面，到後来需要包括服务器回应和快取的资料，以及本机建立而尚未回传到服务器等资料，为了完成这些需求，需要一个更复杂的State去管理，而Redux便是为了解决此问题出现的工具，它藉由强加某些限制在更新发生的方式和时机上，让 state的变化更有可预测性。

三大原则

1. 唯一真相来源
   将整个将整个应用程序的state，储存在一个树状物件里面，redux给他一个名字叫store。这可以让从服务器来的state可以更系统化的管理，并且可以储存开发期间应用程序的state，这可以帮助开发人员更快速的完成复原需求。

console.log(store.getState())

/* Prints
{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}
*/

2.State 是唯读的
唯一一个改变state的方式是发出一个action，action为一个描述发生什麽事的物件。集中管理并储存所有发生变化的action，之後debug或测试时可以用。

store.dispatch({
  type: 'COMPLETE_TODO',
  index: 1
})

store.dispatch({
  type: 'SET_VISIBILITY_FILTER',
  filter: 'SHOW_COMPLETED'
})

3.变更被写成 pure function
若要指定store用哪个action来改变的话，必须写 pure reducer。reducer是一个pure function，它会先取得先前的 state 和一个action，并回传下一个state。