本篇主要將react全家桶的產品非常精煉的提取了核心內容，精華程度堪比精油。各位大人，既然來了，客官您坐，來人，給客官看茶~~

redux

前言

首先，本篇文章要求您對js,react等知識有一定的了解，如果不曾了解，建議您先看一下：React精髓！一篇全概括(急速)

React有props和state:

props意味著父級分發下來的屬性 state意味著組件內部可以自行管理的狀態，并且整個React沒有數據向上回溯的能力，這就是react的單向數據流

這就意味著如果是一個數據狀態非常復雜的應用，更多的時候發現React根本無法讓兩個組件互相交流，使用對方的數據，react的通過層級傳遞數據的這種方法是非常難受的，這個時候，迫切需要一個機制，把所有的state集中到組件頂部，能夠靈活的將所有state各取所需的分發給所有的組件，是的，這就是redux

簡介

redux是的誕生是為了給 React 應用提供「可預測化的狀態管理」機制。 Redux會將整個應用狀態(其實也就是數據)存儲到到一個地方，稱為store 這個store里面保存一棵狀態樹(state tree) 組件改變state的唯一方法是通過調用store的dispatch方法，觸發一個action，這個action被對應的reducer處理，于是state完成更新 組件可以派發(dispatch)行為(action)給store,而不是直接通知其它組件 其它組件可以通過訂閱store中的狀態(state)來刷新自己的視圖

使用步驟

創建reducer

創建action

創建的store，使用createStore方法

按步驟手把手實戰。

上述步驟，對應的序號，我會在相關代碼標出

npm install redux -S // 安裝import { createStore } from 'redux' // 引入const reducer = (state = {count: 0}, action) => {----------> ⑴ switch (action.type){ case 'INCREASE': return {count: state.count + 1}; case 'DECREASE': return {count: state.count - 1}; default: return state; }}const actions = {---------->⑵ increase: () => ({type: 'INCREASE'}), decrease: () => ({type: 'DECREASE'})}const store = createStore(reducer);---------->⑶store.subscribe(() => console.log(store.getState()));store.dispatch(actions.increase()) // {count: 1}store.dispatch(actions.increase()) // {count: 2}store.dispatch(actions.increase()) // {count: 3}