一.什麼是Redux？

Redux是一個第三方狀態管理的js庫，它不僅僅可以適用於react框架，還可以用於其他的vue，auglar等框架。只不過react的生態中不包括一個狀態管理的庫而已，所以與react配合使用較為好。

二.神魔時候要使用Redux來管理狀態

當我們多個元件共享狀態的時候最好使用Redux來管理，方便元件間資料的共享。當咱們沒有涉及元件間資料共享的時候儘量不要使用Redux

二.Redux的三個核心要素

1. actions

actions可以說是一個讓reducer執行不同函式的supporter， 它為reducer傳入type來讓reducer來執行不同的修改資料方式，並且把data傳給reducer。所以actions的型別要是一個物件，並且咱們可以把actions抽離出去封裝到一個工廠函式中如下：
 

/*./redux/actions.js*/

export const increament = (num)=> {

	return {

		type: 'INCREAMENT', //type屬性由於要跟reducer中的相同所以我們可以把它抽離出去./redux/actions-type.js

		data: num

	}

}

2.reducer

reduce是一個返回state的純函式，裡頭要對state的值進行處理。

/*./redux/reducer.js*/

export default count = (state=0, action)=> {   //state需要在這裡直接賦予預設值，因為每個狀態都有初始狀態
 

switch (action.type) {

	case "INCREMENT":

		return state + 1

	default:

		return state

}

}

3.Store

store是一個連線state，reducer的倉庫，其中提供了三種api供我們來操作

• store.getState() : 用來獲取倉庫中資料，返回state
• store.dispitch(action): 用來呼叫reducer來修改state， action需要傳入的型別是一個物件
• store.subscribe(()=> {}): 當store中的資料改變時會進行呼叫， 由於store中資料改變不會使頁面重新渲染，所以我們在入口檔案中可以把reactDom.render（）放入其中來實現類似於資料響應式的作用。

/*./redux/store.js*/

import {createStore} from 'redux'

import reducer from './reducer.js/

export const count = createStore(reducer)

//然後在index.js的入口檔案中引入，通過屬性賦值傳遞給需要的元件