「 React 」redux

简介

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

Tip:redux如果不是比较复杂的组件间通信的情况下,建议还是不使用,因为会造成代码量的上升和复杂

关键模块

1. Store

保存状态的主要部分,共享的状态数据保存在该对象中

1. Action Creators

工厂函数,主要用来生成action对象,传输更新的状态数据.

1. Reducers

接收action对象,对之前的状态和action中的新状态进行操作,并且返回新的结果存在store中.

关键函数

1. store.createStore()

创建store对象,参数传入reducers进行绑定.

1. store.dispatch()

分发action对象,传入reducers,进行状态的更新.

1. store.subscribe()

监听事件,当有状态改变时,会自动调用监听的方法(一般用来重新渲染方法)

使用示例

1.下载安装

//此处我使用的是yarn,后面两个后面介绍
yarn add redux  react-redux  redux-thunk

2.创建文件目录

3.各部分内容

store.js

import { createStore,applyMiddleware } from 'redux'
import reducer from './reducer'   //导入reducer进行绑定
import thunk from 'redux-thunk'    //这是一个异步解析实现

export default createStore(reducer,applyMiddleware(thunk)); // 导出store对象

action-creator.js

import { INCREASE, DECREASE } from './action-type'  //全局命名声明文件

// 不同的操作,返回action对象,type为标识,data为传输的数据
export const incresement = (data) => ({ type:INCREASE,data:data})  

export const decresement = (data) =>({type:DECREASE,data:data})

//模拟异步操作,返回的是主动进行分发操作的一个函数
export const incresementAsync = (data) => {
    return (dispatch) => {
      setTimeout(()=>{
        dispatch(incresement(data))
      },1000)
    }
    
}

reducer.js

import {INCREASE,DECREASE} from './action-type'

//当有dispatch被调用时,会自动来遍历该模块中的所有函数,并进行匹配.
//previousState为之前的状态,action中包含着新的数据
export default function number(previousState = 0,action) {
    switch(action.type){
        case INCREASE:
        return previousState + action.data;
        case DECREASE:
        return previousState - action.data;
        default:
        return previousState;
    }
}

action-type.js

//声明定义了一些命名
export const INCREASE = 'INCREASE';

export const DECREASE = 'DECREASE';

App.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { incresement, decresement,incresementAsync } from './redux/action-creator'
class App extends Component {

// 进行更新操作
  increase = () => {
    this.props.incresement(1)
  }

  decrease = () => {
    this.props.decresement(1)
  }

  increaseAsync = () => {
    this.props.incresementAsync(1)
  }

  render() {
    return (
      <div>
      //获取状态值
        <h3>click {this.props.number} times</h3>
        <button onClick={this.increase}>+++</button>
        <button onClick={this.decrease}>---</button>
        <button onClick={this.increaseAsync}>异步加</button>
      </div>
    )
  }
}
//关键在这里,这是简写的方式.
//得益于react-redux,将创建action对象和dispatch的操作都进行了封装简化,并且封装了获取状态值.
//不管是进行获取还是更新操作,都封装进了props属性中.
export default connect(
  (state) => ({ number: state }),
  { incresement, decresement,incresementAsync }
)(App)

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import store from './redux/store'
import App from './App';

// 用Provider包装,就省略了用subscribe()监听的回调.
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));

react-redux

专门用来简化redux在react中使用的一个库.
它将原生redux的.getState(),创建action对象,dispatch等方法进行了封装.提供如上代码的简写方式.

redux-thunk

用来帮助解析异步操作.
只需要在创建store对象的时候用中间件包装的方式作为第二个参数传入即可.

扩展调试工具

redux-devtools-extension.

在谷歌商店中装好这个插件,然后在创建store对象的时候

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(reducer, composeWithDevTools(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

总结

redux在复杂项目中比较适合使用.它保存着一些多处需要共享的状态数据,在整个项目中比较方便进行状态数据的更新以及获取.

避免了一些层级比较多或者跨越了比较多级的同级兄弟组件需要互相通信的复杂过程.