【React】React全家桶（十）Redux

1 Redux概述

中文文档: http://www.redux.org.cn/

Github: https://github.com/reactjs/redux

1.1 Redux简介

Redux是一个专门用于做状态管理的JS库(不是react插件库)。它专门为React.js这门框架设计，但并不是只能用于react，可以用于任何界面库。 它的作用是集中式管理react应用中多个组件共享的状态。

安装：

npm i redux

使用场景：

• 某个组件的状态，需要让其他组件可以随时拿到（共享）
• 一个组件需要改变另一个组件的状态（通信）

总体原则：能不用就不用，如果不用比较吃力才考虑使用

使用Redux的原因：

React仅仅是一个视图层的框架，解决的是数据与模板的渲染问题，但是并没有提供数据的状态管理方案，这在大型项目中是一个非常大的痛点 。

凡是复杂一些的应用都会有下图左边组件树的结构，非父子组件传递数据需要层层传递，如果项目稍微复杂，即使可以开发，但也变得不可维护。因此Redux应运而生。让Redux统一管理数据，任何组件对数据的操作，都交给redux管理，这样就大大提高了开发和维护的效率。

Redux用与不用的区别

1.2 Redux工作流程

首先React组件会在 Redux 中派发一个 action 方法，通过调用 store.dispatch 方法，将 action 对象派发给 store ，当 store 接收到 action 对象时，会将先前的 state 与传来的 action 一同发送给 reducer ，reducer 在接收到数据后，进行数据的更改，返回一个新的状态给 store ，最后由 store 更改 state 。

2 Redux三大核心概念

2.1 Action

action 是把数据从应用传到 store 的有效载荷，是 store 中唯一的数据来源，一般我们会通过调用 store.dispatch() 将 action 传到 store

我们需要传递的 action 是一个动作对象，它包含2个属性：

• type：标识属性，值为字符串， 唯一， 必要属性
• data：数据属性,，值类型任意， 可选属性

例如，这里我们暴露了一个用于返回一个 action 对象的方法，我们调用它时，会返回一个 action 对象

export const createIncrementAction = data => ({
   
   
    type: INCREMENT,
    data
})

2.2 Reducer

在 reducer 中，我们需要指定状态的操作类型，要做怎样的数据更新，reducer还会根据 action 的指示，对 state 进行对应的操作，然后返回操作后的 state 。总结：reducer用于初始化状态及加工状态( 根据 action 更新 state )

如下，我们对接收的 action 中传来的 type 进行判断，更改数据，返回新的状态

export default function countReducer(preState = initState, action) {
   
   
    const {
   
    type,data } = action;
    switch (type) {
   
   
        case INCREMENT:
            return preState + data
        case DECREMENT:
            return preState - data
        default:
            return preState
    }
}

2.3 Store

前面我们了解了action来描述“发生了什么”，以及使用 reducer来根据 action 更新 state 的用法。 而store就是将state、action、reducer联系在一起的对象

store 是 Redux 的核心，可以理解为是 Redux 的数据中台，我们可以将任何我们想要存放的数据放在store 中，在我们需要使用这些数据时，我们可以从中取出相应的数据。

Store 的作用如下：

• 维持应用的 state；

• getState()(https://www.redux.org.cn/docs/api/Store.html#getState)：获取 state

• dispatch(action)：分发action，触发reducer调用，产生新的state

• subscribe(listener)： 注册监听，当产生了新的state时, 自动调用

• 具体编码：

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

3 Redux API

3.1 createStore()

createStore()：创建包含指定reducer的store对象

3.2 applyMiddleware()

applyMiddleware()：应用上基于redux的中间件(插件库)

3.3 combineReducers()

combineReducers()：合并多个reducer函数

4 使用redux编写应用

效果图

4.1 代码实现

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

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

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

import {
   
   INCREMENT,DECREMENT} from './constant'

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

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

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

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

//将这两个单词写在 `constant` 文件中，并对外暴露，当我们需要使用时，我们可以引入这个文件，并直接使用它的名称即可，直接使用 `INCREMENT` 即可
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

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 {
   
   

  /* componentDidMount(){
    //检测redux中状态的变化，只要变化，就调用render
    store.subscribe(()=>{
      this.setState({})
    })
  } */

  //加法
  increment = ()=>{
   
   
    const {
   
   value} = this.selectNumber
    store.dispatch(createIncrementAction(value*1))
  }
  //减法
  decrement = ()=>{
   
   
    const {
   
   value} = this.selectNumber
    store.dispatch(createDecrementAction(value*1))
  }
  //奇数再加
  incrementIfOdd = ()=>{
   
   
    const {
   
   value} = this.selectNumber
    const count = store.getState()
    if(count % 2 !== 0){
   
   
      store.dispatch(createIncrementAction(value*1))
    }
  }
  //异步加
  incrementAsync = ()=>{
   
   
    const {
   
   value} = this.selectNumber
    setTimeout(()=>{
   
   
      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