React Redux

开始接触了，边学习边整理

什么是Redux

是一个状态集中管理库。

Redux安装

npm install --save redux

Redux遵循的三个原则

1.单一事实来源：整个应用的状态存储在单个 store 中的对象/状态树里。单一状态树可以更容易地跟踪随时间的变化，并调试或检查应用程序。

2.状态是只读的：改变状态的唯一方法是去触发一个动作。动作是描述变化的普通 JS 对象。就像 state 是数据的最小表示一样，该操作是对数据更改的最小表示。

3.使用纯函数进行更改：为了指定状态树如何通过操作进行转换，你需要纯函数。纯函数是那些返回值仅取决于其参数值的函数。

核心API

1.Store

保存数据。整个应用只能有一个store。

Redux提供createStore这个函数，用来生成Store。这个对象有各种方法，用来让外界获取Redux的数据(store.getState)，或者让外界来修改Redux中的数据（store.dispatch）。

import { createStore } from 'redux';
const store = createStore(reducer); //使用createStore创建个store

2.State

store对象包含所有数据。如果要获得某个时点点数据，就要对Store生成快照。这种时点的数据集合就叫做State。

import { createStore } from 'redux';
const store = createStore(reducer); 
const state = store.getState(); //此时的State，可以通过store.getState()拿到

3.Action

用来描述发生了什么事情的对象。它是 store 数据的唯一来源。一般来说会通过store.dispatch() 将 action 传到 store。State的变化，会导致view的变化，用户只能接触view，接触不到State，用户通过action来改变state，这是改变state的唯一途径。(Action 就是 View 发出的通知，表示 State 应该要发生变化了。)

import { createStore } from 'redux';
const store = createStore(reducer);
const action = {
    type: 'change_input',
    value: 'Learn Redux',
};
store.dispatch(action); //​store.dispatch()​​是 View 发出 Action 的唯一方法。

4.Reducer

这是一个确定状态将如何变化的地方。Reducer用来描述应用是如何更新state。Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。

import { createStore } from 'redux';
const reducer = function (preState, action){
  const {type, value} = action
  //switch
  //...
  return newState
}
const store = createStore(reducer);

搭配React

Redux 和 React 之间没有关系，Redux 默认并不包含React绑定库，需要单独安装。

npm install --save react-redux