强大的状态管理器Redex

Redux是什么？

• redux 是一个专门用于做状态管理的JS库（不是react插件库），学过vue框架的应该知道和vuex差不多。
• 它可以用在react，angular，vue等项目中，但基本与react配合使用。
• 作用： 集中式管理react应用中多个组件共享的功能。

三大原则

image.png

单一数据源

• 整个应用的state被存储在一个对象树中, 并且这个对象树只存在一个唯一的store

State是只读的

• 唯一改变state的方法简书触发action, 让action去修改state, action是一个用于描述已发生事件的普通对象
  这样就确保了视图和网络请求都不能直接的修改state, 让所以的修改都被集中化处理

使用纯函数来执行修改

• 为了描述 action 如何改变 state tree ，你需要编写 reducers
  Reducer 只是一些纯函数，它接收先前的 state 和 action，并返回新的 state。刚开始你可以只有一个 reducer，随着应用变大，你可以把它拆成多个小的 reducers，分别独立地操作 state tree 的不同部分，因为 reducer 只是函数，你可以控制它们被调用的顺序，传入附加数据，甚至编写可复用的 reducer 来处理一些通用任务，如分页器。

Redux成员及数据流

• actions
  • actions其实是描述操作的对象，我们调用dispatch时需要传入此对象。
• store
  • store是整个应用的数据存储仓库，把我们全局管理的状态数据存储起来。
• reducers
  • reducers接收actions并更新store

Redux数据流的走向

image.png

Redux中最核心的API -- createStore

Store与Reducers建立联系

• store可以相当于是一个工厂
• reducers可以相当于是工厂里面干活的机器

import { createStore } from 'redux';
const store = createStore(reducers);

通过 createStore方法创建的是一个对象, 他本身包含4个方法.

• getState(): 获取store中当前的状态
• dispatch(): 分发一个action, 并返回这个action, 这是唯一能改变store中数据的方式
• subscribe(listener): 注册一个监听者, 它在store发生变化时被调用
• replaceReducer(nextReducer): 更新当前store里的reducer, 一般只会在开发模式中调用该方法

// 导入createStore
import { createStore } from 'redux';

const firstReducer = (state = 0, action) => {
    switch (action.type) {
        case 'add':
            return state + 1;
        case 'reducer':
            return state - 1;
        default:
            return state;
    }
}
 // 建立联系
const store = createStore(firstReducer);

export default store;

使用dispatch & getState

import React, { Component } from 'react';
import store from './store'
class FirstReducer extends Component {
    add = () => {
        store.dispatch({ type: 'add' })
    }
    reducer = () => {
        store.dispatch({ type: 'reducer' })
    }
    render() {
        return (
            <div>
                总数:{store.getState()}
                <button onClick={this.add}>加1</button>
                <button onClick={this.reducer}>减1</button>
            </div>
        );
    }
}

export default FirstReducer;

react-redux

• 由于redux的写法太繁琐, 还每次都需要重新调用render, 不太符合我们了解react编程
• react-redux问世, 安装react-redux: npm install react-redux --save
• react-redux提供两个api供我们使用
  • Provider 顶级组件, 功能为我们提供数据
  • connect 高阶组件, 功能为提供数据和方法

通过props的方法来传输数据

import React, { Component } from 'react'
import { connect } from 'react-redux';

const mapStateToProps = (state) => {
  return {
    count: state
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    add: () => {
      dispatch({type: 'add'})
    },
    reducer: () => {
      dispatch({type: 'reducer'})
    }
  }
}
class App extends Component {
  render() {
    return (
      <div>
        App
        {this.props.count}
        <button onClick={() => this.props.add()}>加1</button>
        <button onClick={() => this.props.reducer()}>减1</button>
      </div>
    )
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import store from './redux/store';
import { Provider } from 'react-redux';
ReactDOM.render(
  <Provider store={store}>
      <App/>
 </Provider> , document.querySelector('#root'));

redux中间件

• 由于redux reducer默认只⽀持同步，实现异步任务或者延时任务
  时，我们就要借助中间件的⽀持了

• 没使用中间件时的redux数据流

  
  image.png
• 使⽤了中间件middleware之后的redux数据流

image.png

• redux-thunk 支持我们reducer在异步操作结束后自动执行

npm i redux-thunk --save

• redux-logger打印日志记录协助本地调试

npm i redux-logger --save

import { createStore,applyMiddleware } from 'redux'
import logger from 'redux-logger'
import thunk from 'redux-thunk'
const fitstReducer = (state=0,action ) => {
 console.log(action)
 switch(action.type){
 //当传⼊action的type为add的时候给state+1
 case 'add' :
 return state+1;
 //当传⼊action的type为reduce的时候给state-1
 case 'reduce' :
 return state-1;
 //当传⼊的都不是以上的类型是返回旧的state
 default:
 return state;
 }
}
//创建数据仓库，把我们编写的reducer作为参数传⼊createStore
//有⼀个注意点就是logger最好放在最后，⽇志最后输出才不会出
//bug，因为中间件时按顺序执⾏
const store=createStore(fitstReducer,applyMiddleware(thunk,logger))
export default store