redux是什么

1. redux是一个专门用于做状态管理的JS库(不是react插件库)。
2. 它可以用在react, angular, vue等项目中, 但基本与react配合使用。
3. 作用: 集中式管理react应用中多个组件共享的状态。

什么情况下需要使用redux

1. 某个组件的状态，需要让其他组件可以随时拿到（共享）。
2. 一个组件需要改变另一个组件的状态（通信）。
3. 总体原则：能不用就不用, 如果不用比较吃力才考虑使用。

安装使用

• 运行命令

yarn add redux

redux 原理图

主要流程

• 组件 通过 Action Creators 创建不同种类的Actions
• Store调用dispatch方法将不同的Actions进行执行
• Reducers 管理状态的初始化和后续操作，返回给 Store 新的状态，组件可以通过store.getState() 获取状态

各部分职责

• Action Creators: 负责生成 Action 对象，并分发给 Store
• Store：负责管理数据，并将 Action 传递给 Reducers
• Reducers: 对数据进行处理、初始化，并返回给 Store

redux的三个核心概念

1. action

• 动作的对象
• 包含2个属性
  type：标识属性, 值为字符串, 唯一, 必要属性
  data：数据属性, 值类型任意, 可选属性
• 例子：{ type: 'ADD_STUDENT',data:{name: 'tom',age:18} }
  2. reducer
• 用于初始化状态、加工状态。
• 加工时，根据旧的state和action， 产生新的state的纯函数。

3. store

• 将state、action、reducer联系在一起的对象
• 如何得到此对象?

1. import {createStore} from 'redux'
2. import reducer from './reducers'
3. const store = createStore(reducer)

• 此对象的功能?
  1)getState(): 得到state
  2)dispatch(action): 分发action, 触发reducer调用, 产生新的state
  3)subscribe(listener): 注册监听, 当产生了新的state时, 自动调用

redux的核心API

1. createstore()
作用：创建包含指定reducer的store对象

2. store对象

• 作用: redux库最核心的管理对象
• 它内部维护着:

1. state
2. reducer

3. 核心方法:

1. getState()
2. dispatch(action)
3. subscribe(listener)

4. 具体编码:

1. store.getState()
2. store.dispatch({type:'INCREMENT', number})
3. store.subscribe(render)

4. applyMiddleware()
   作用：应用上基于redux的中间件(插件库)
5. combineReducers()
   作用：合并多个reducer函数

简易demo

• 目录结构

• App.jsx

import React, { Component } from 'react'
import Count from './components/Count'export default class App extends Component {render() {return (<div><Count/></div>)}
}

import React from 'react'
import ReactDOM from 'react-dom'import App from './App'
import store from './redux/store'ReactDOM.render(<App/>,document.getElementById('root'))//由于rudex只管状态管理，不会管理状态更新后的页面刷新，因此需要手动的刷新。（也可以通过this.setState({})进行状态更新）
store.subscribe(()=>{ReactDOM.render(<App/>,document.getElementById('root'))
})

注：由于rudex只管状态管理，不会管理状态更新后的页面刷新，因此需要手动的刷新。（也可以通过this.setState({})进行状态更新）

• components\Count\index.jsx

import React, { Component } from 'react'
//引入store，用于获取redux中保存状态
import store from '../../redux/store'
//引入actionCreator，专门用于创建action对象
import {createIncrementAction,createDecrementAction} from '../../redux/count_action'export default class Count extends Component {state = {carName:'奔驰c63'}/* componentDidMount(){//检测redux中状态的变化，只要变化，就调用renderstore.subscribe(()=>{this.setState({})})} *///加法increment = ()=>{const {value} = this.selectNumberstore.dispatch(createIncrementAction(value*1))}//减法decrement = ()=>{const {value} = this.selectNumberstore.dispatch(createDecrementAction(value*1))}//奇数再加incrementIfOdd = ()=>{const {value} = this.selectNumberconst count = store.getState()if(count % 2 !== 0){store.dispatch(createIncrementAction(value*1))}}//异步加incrementAsync = ()=>{const {value} = this.selectNumbersetTimeout(()=>{store.dispatch(createIncrementAction(value*1))},500)}render() {return (<div><h1>当前求和为：{store.getState()}</h1><select ref={c => this.selectNumber = c}><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>&nbsp;<button onClick={this.increment}>+</button>&nbsp;<button onClick={this.decrement}>-</button>&nbsp;<button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;<button onClick={this.incrementAsync}>异步加</button>&nbsp;</div>)}
}

Rudex文件部分

• const.js
  该模块是用于定义action对象中type类型的常量值，目的只有一个：便于管理的同时防止程序员单词写错

export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

• count_action.js
  该文件专门为Count组件生成action对象

import {INCREMENT,DECREMENT} from './constant'export const createIncrementAction = data => ({type:INCREMENT,data})
export const createDecrementAction = data => ({type:DECREMENT,data})

• count_reducer.js

1. 该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
2. reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)

import {INCREMENT,DECREMENT} from './constant'const initState = 0 //初始化状态
export default function countReducer(preState=initState,action){// console.log(preState);//从action对象中获取：type、dataconst {type,data} = action//根据type决定如何加工数据switch (type) {case INCREMENT: //如果是加return preState + datacase DECREMENT: //若果是减return preState - datadefault:return preState}
}

• store.js
  该文件专门用于暴露一个store对象，整个应用只有一个store对象

//引入createStore，专门用于创建redux中最为核心的store对象
import {createStore} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './count_reducer'
//暴露store
export default createStore(countReducer)

效果：

异步 action

• store.dispatch(action) 可以传入 object 或者 function

• 如果 传入的 action 是 object，那么称为 同步 action

• 如果 传入的 action 是 function，那么称为异步 action

• 但传入的 action 如果是 function，store无法理解，需要使用 redux-thunk中间件

1. 安装 redux-thunk

yarn add redux-thunk

2. 然后在 store 里应用中间件

import {createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk'	// 引入 thunk 中间件
import test from './test-reducer'export default createStore(test, applyMiddleware(thunk))

• 这样，store 在收到 function 类型的 action 之后，就可以理解了

• store 会调用这个function action，并传入 dispatch 方法

• 然后，我们可以在这个函数里面，写一些定时任务，或者ajax请求，但一般还是会调用 dispatch 去分发一个普通的 object action ，来操作数据更新

和非异步版相比，区别有二；
redux\count_action.js代码

import {DECREMENT,INCREMENT} from './constant'
export const createIncrementAction = (data)=>({type:INCREMENT,data})
export const createDecrementAction = (data)=>({type:DECREMENT,data})改为了
import {DECREMENT,INCREMENT} from './constant'
// import store from './store'
export const createIncrementAction = (data)=>({type:INCREMENT,data})
export const createDecrementAction = (data)=>({type:DECREMENT,data})
export const createIncrementAsyncAction =(data,time) => {return (dispatch)=>{setTimeout(() => {dispatch(createIncrementAction(data))}, time);}
}

redux\store.js代码：

import {createStore} from 'redux'
import countReducer from './count_reducer'
export default createStore(countReducer)
改为了
import {createStore,applyMiddleware} from 'redux'
import countReducer from './count_reducer'import thunk from 'redux-thunk'
export default createStore(countReducer,applyMiddleware(thunk))