Redux原理分析以及使用详解（TS && JS)

2021-01-08 本文已影响0人 Poppy11

Redux原理分析

image.png

一、Reudx基本介绍

1.1、什么时候使用Redux？

简单说，如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。

用户的使用方式非常简单
用户之间没有协作
不需要与服务器大量交互，也没有使用 WebSocket
视图层（View）只从单一来源获取数据

从组件角度看，如果你的应用有以下场景，可以考虑使用 Redux。

某个组件的状态，需要共享
某个状态需要在任何地方都可以拿到
一个组件需要改变全局状态
一个组件需要改变另一个组件的状态

1.2、为什么要用Redux

在React中，数据在组件中是单向流动的，这是react的一个特点，单向数据流动，会让开发者阅读代码以及数据流向时更清楚，数据从一个方向父组件流向子组件（通过props）,但是这也伴随着一个问题，两个非父子组件之间通信就相对麻烦，例如A页面用到了B页面产生的数据，redux的出现就是方便解决了这类问题。

1.3、Redux设计理念

Redux是将整个应用状态存储到一个地方上称为store,里面保存着一个状态树store tree,组件可以派发(dispatch)行为(action)给store,而不是直接通知其他组件，组件内部通过订阅store中的状态state来刷新自己的视图

1.4、Redux是什么？

很多人认为redux必须要结合React使用，其实并不是的，Redux 是 JavaScript 状态容器，只要你的项目中使用到了状态，并且状态十分复杂，那么你就可以使用Redux管理你的项目状态，它可以使用在react中，也可以使用中在Vue中，当然也适用其他的框架。

二、Redux的工作原理

image.png

1、首先我们找到最上面的state

2、在react中state决定了视图（UI），state的变化就会调用React的render（）方法，从而改变视图

3、用户通过一些事件（如点击按钮，移动鼠标）就会向reducer派发一个action

4、reducer接受到action后就会去更新state

5、store是包含了所有的state，可以把它看作所有状态的集合

Redux三大原则

1、唯一数据源
2、保持只读状态
3、数据改变只能通过纯函数来执行

1、唯一数据源

整个应用的state都被存储到一个状态树里面，并且这个状态树，只存在于唯一的store中

2、保持只读状态

state是只读的，唯一改变state的方法就是触发action，action会dispatch分发给reducer

3、数据改变只能通过纯函数来执行

使用纯函数来执行修改，也就是reducer

纯函数是什么，一个函数的返回结果只依赖其参数，并且执行过程中没有副作用。

返回结果只依赖其参数

//  非纯函数 返回值与a相关，无法预料
const a = 1
const foo = (b) => a + b
foo(2)                    // => 3

// 纯函数 返回结果只依赖于它的参数 x 和 b
const a = 1
const foo = (x, b) => x + b
foo(1, 2) // => 3

函数执行过程中没有副作用

函数执行的过程中对外部产生了可观察的变化，我们就说函数产生了副作用。例如修改外部的变量、调用DOM API修改页面，发送Ajax请求、调用window.reload刷新浏览器甚至是console.log打印数据，都是副作用。

// 无副作用
const a = 1
const foo = (obj, b) => {
  return obj.x + b
}
const counter = { x: 1 }
foo(counter, 2)                       // => 3
counter.x                             // => 1

// 修改一下 ，再观察(修改了外部变量，产生了副作用。)
const a = 1
const foo = (obj, b) => {
  obj.x = 2;
  return obj.x + b
}
const counter = { x: 1 }
foo(counter, 2)                       // => 4
counter.x                             // => 2

为什么要煞费苦心地构建纯函数？因为纯函数非常“靠谱”，执行一个纯函数你不用担心它会干什么坏事，它不会产生不可预料的行为，也不会对外部产生影响。不管何时何地，你给它什么它就会乖乖地吐出什么。如果你的应用程序大多数函数都是由纯函数组成，那么你的程序测试、调试起来会非常方便。

2.1、Action

action本质上就是一个对象，它一定有一个名为type的key如 {type: 'add'} , {type: 'add'} 就是一个action ，但是我们只实际工作中并不是直接用action ，而是使用 action创建函数（千万别弄混淆），顾名思义action创建函数就是一个函数，它的作用就是返回一个action，如：

function add() {    return {        type: 'add'，        money : 1    }}

2.2、Reducer

reducer其实就是一个函数，它接收两个参数，第一个参数是需要管理的状态state，第二个是action。reducer会根据传入的action的type值对state进行不同的操作，然后返回一个新的state，而不是在原有state的基础上进行修改,但是如果遇到了未知的（不匹配的）action，就会返回原有的state，不进行任何改变。

function reducer(state = {money: 0}, action) {
    //返回一个新的state可以使用es6提供的Object.assign()方法，或扩展运算符
    switch (action.type) {
        case '+':
            return Object.assign({}, state, {money: action.money + 1});
        case '-':
            return {...state, ...{money: action.money - 1}};
        default:
            return state;
    }
}

2.3、store

可以把store想成一个状态树，它包含了整个redeux应用的所有状态。我们使用redux提供的createStore方法生成store

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

store提供了几个方法供我们使用，下面是我们常用的3个：

store.getState();//获取整个状态树
store.dispatch();//改变状态，改变state的唯一方法
store.subscribe();//订阅一个函数，每当state改变时，都会去调用这个函数

三、Redux中间件机制

Redux本身就提供了非常强大的数据流管理功能，但这并不是它唯一的强大之处，它还提供了利用中间件来扩展自身功能，以满足用户的开发需求。

image.png

上面是很典型的一次 redux 的数据流的过程，但在增加了 middleware 后，我们就可以在这途中对 action 进行截获，并进行改变。且由于业务场景的多样性，单纯的修改 dispatch 和 reduce 人显然不能满足大家的需要，因此对 redux middleware 的设计是可以自由组合，自由插拔的插件机制。也正是由于这个机制，我们在使用 middleware 时，我们可以通过串联不同的 middleware 来满足日常的开发，每一个 middleware 都可以处理一个相对独立的业务需求且相互串联：

image.png

如上图所示，派发给 redux Store 的 action 对象，会被 Store 上的多个中间件依次处理，值得注意的是这些中间件会按照指定的顺序一次处理传入的 action，只有排在前面的中间件完成任务之后，后面的中间件才有机会继续处理 action，同样的，每个中间件都有自己的“熔断”处理,当它认为这个 action 不需要后面的中间件进行处理时，后面的中间件也就不能再对这个 action 进行处理了。 换言之，中间件都是对store.dispatch()的增强

四、redux的异步流

在多种中间件中，处理 redux 异步事件的中间件，绝对占有举足轻重的地位。从简单的 react-thunk 到 redux-promise 再到 redux-saga等等，都代表这各自解决redux异步流管理问题的方案

4.1 、redux-thunk

redux-thunk最重要的思想，就是可以接受一个返回函数的action creator。如果这个action creator 返回的是一个函数，就执行它，如果不是，就按照原来的next(action)执行。正因为这个action creator可以返回一个函数，那么就可以在这个函数中执行一些异步的操作，就比如网络请求。

export function addCount() {
  return {type: ADD_COUNT}
} 
export function addCountAsync() {
  return dispatch => {
    setTimeout( () => {
      dispatch(addCount())
    },2000)
  }
}

addCountAsync函数就返回了一个函数，将dispatch作为函数的第一个参数传递进去，在函数内进行异步操作。

尽管redux-thunk很简单，而且也很实用，但人总是有追求的，都追求着使用更加优雅的方法来实现redux异步流的控制，这就有了redux-promise。

4.2、redux-promise

使用redux-promise中间件，允许action是一个promise，在promise中，如果要触发action，则通过调用resolve来触发

4.3、redux-sage

redux-saga将react中的同步操作与异步操作区分开来，以便于后期的管理与维护，redux-saga相当于在Redux原有数据流中多了一层，通过对Action进行监听，从而捕获到监听的Action，然后可以派生一个新的任务对state进行维护，通过更改的state驱动View的变更。

4.4、总结

总的来讲Redux Saga适用于对事件操作有细粒度需求的场景，同时它也提供了更好的可测试性，与可维护性，比较适合对异步处理要求高的大型项目。一般项目redux-thunk就足以满足自身需求了。毕竟react-thunk对于一个项目本身而言，毫无侵入，使用极其简单，只需引入这个中间件就行了。而react-saga则要求较高，难度较大，我现在也并没有掌握和实践这种异步流的管理方式。

五、使用redux-dev-tools插件调试redux

5.1、下载插件

首先在谷歌商店搜索redux-dev-tools，下载这个插件，然后重启浏览器

image.png

在redux中的store文件进行配置

若是JS则添加

const store = createStore(
  reducers,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

若是TS则添加

const store = createStore(reducer, compose(
    applyMiddleware(thunk),
    (window as any).__REDUX_DEVTOOLS_EXTENSION__ && (window as any).__REDUX_DEVTOOLS_EXTENSION__()))

Tip ：原来我使用JS+Redux，添加这个插件配置，部署到服务器上用户访问以及别人启动我的项目，都没有报错，但是当我使用TS+hooks+Redux，没有测试部署到服务器会怎么样，但是当别人启动这个项目，若没有安装这个插件则会报错。若想避免这个问题，则可在webpack配置启动项目或者打包项目不同的环境。可使用 process.env.NODE_ENV === 'production' 判断不同环境，或者使用 window.location.host 获取url地址来进行判断是否开启这个插件。

下面则是工具的图，该工具，可以查看action的触发过程，以及state的变化。非常方便进行调试。

image.png

六、实际开发中使用redux

6.1、目录结构，在项目src里面创建即可

image.png

6.1.1、store

store则是配置redux总仓库，createStore（）则需要把reducer传进来，以及上文介绍到的中间件，以及设置调试工具则都是在此文件进行配置

import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import reducer from './reducer'

const store = createStore(reducer, compose(
    applyMiddleware(thunk),
))

export default store

6.1.2、action

action则是view用来调用的，action通过dispatch来触发reducer，然后来更新state

image.png

6.1.3、reducer

store文件需要配置reducer，所以reducer文件夹中则需要一个index文件，来引入所有的reducer，并且暴露出去，供store文件使用。

import {combineReducers} from 'redux'
import manage from './manage/manage'
import submit from './submit'
import saveName from './manage/saveName'

export default combineReducers({
    manage,
    submit,
    saveName
})

例如我现在需要存储上面action文件里面key为ALL_NAME的值，我reducer文件则需要这么写

const init = {
    userNameData : []
}

export default (state = init, action : any) => {
    switch (action.type) {
        case 'ALL_NAME':
            return {...state,userNameData : action.allName}
        default:
            return state
    }
}

6.1.4、项目入口文件,index.ts

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


ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

6.2、在组件中取出store仓库的值，和如果触发action（JS && TS + hooks）

6.2.1、JS的用法（取值以及触发action）

import React, {Component} from 'react'
import {connect} from 'react-redux'
import {GetAllClass,SaveScroll} from '../../redux/action/product'
class Home extends Component {
 componentDidMount() {
       //取出值
       const {user,productAllClass,productScroll} = this.props
       //触发action
       this.props.getAllClass()
       const scroll = document.scrollingElement.scrollTop
       //触发action
       this.props.SaveScroll(scroll)
  }
}

//取值
//其实mapStateToProps接收了state，但是此处这么写，是使用了ES6的解构，会简化代码
const mapStateToProps = ({user, productAllClass,productScroll}) => ({
    user, productAllClass,productScroll
})

//调用action
const mapDispatchToProps = (dispatch) => ({
    getAllClass: () => dispatch(GetAllClass()),
    SaveScroll : (scroll) => dispatch(SaveScroll(scroll))
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Home))

大家可能看到这就有疑问，mapStateToProps和mapDispatchToProps是干嘛的？有什么作用？

首先我们在组件当中使用redux，就需要使用react-redux中的connect将该组件与store连接起来，而connect又可以接受两个参数，分别是mapStateToProps和mapDispatchToProps,前者则是获取store里面的状态，用于建立组件跟store的state的映射关系，后者则是用于建立组件跟store.dispatch的映射关系。
TS的用法（取值以及触发action）

import { useDispatch, useSelector } from 'react-redux'

const ManageTable: React.FC<{}> = () => {
    const dispatch = useDispatch()
    const userNameRedux = useSelector((state: any) => state.saveName.userNmae);
    return (
        useEffect(() => {
            //调用action，传一个值name
            dispatch(saveSearchUserName(name))
            //获取store的值
            console.log(userNameRedux)
        },[])
    )
}

BUG分享

需求：一个接口，需要在多个页面调用，而且多个页面互相没有关联，我在每个页面都去调用这个接口，显然这是浪费性能的，我就想在react入口文件去调用action，然后分发给reducer，存储到store，页面就能获取到值。

大家可以先观察观察这份代码。大家觉得我能如愿在第一次加载的时候能拿到数据吗？

export const test = () => {
    console.log("1")
    return  async (dispatch: any) => {
        console.log("2")
        const data = await getAllNameApi()
        console.log("3")
        dispatch({
           type: 'ALL_NAME',
           allName: data
        })
    }
}

//拆分一下上面的代码
export const test = () => {
    console.log("1")
    return new Promise(async (resolve) => {
        console.log("2")
        resolve(await getAllNameApi())
    }).then(() => {
        console.log("3")
        dispatch({
           type: 'ALL_NAME',
           allName: data
        })
    })
}

 useEffect(() => {
      const manage: any = useSelector((state: any) => state.manage);
      console.log(manage.userNameData)
  },[])

最终正确打印顺序应该是1，2，数据，4。

最后经过反复研究，并且请教各路大神，最终总结了两个原因。

从同步异步的角度来说这个问题：想让异步变成类似同步的操作我们应该怎么办，大家想到的肯定是async/await，阻塞代码，我开始一直陷入一个误区，我内部的确造成了阻塞，等到data有值了，才会dispatch，但是，这整个Action方法，返回的是一个async，async其实本质也就是promise对象，那么又是一个异步对象，所以它的外部不会等待，当代码执行到await这块，因为需要时间来调用接口，所以会跳出去，页面第一次会渲染，而不会说等待这个数据成功存入redux里面才会渲染页面。

从React页面渲染来说：页面肯定是先渲染，不会关心dispatch，也不会关心action，只会关心我store里面数据的变化，其实也就是我第一次useEffect的时候，数据取得其实是初始值。

对于这个问题，在我这份代码里面，目前我想到了三个解决方法：

1、定义初始值loading为true，当我们dispatch成功把数据存入的时候，才将loading改为false，写一个加载动画，用这个loading来控制。

2、在useEffect监听store里面这个值的变化，当有值的时候，才绑定到页面上

const [autoData,setAutoData] = useState<Array[item]>([])   //此处item是我写的定义类型的接口
useEffect(() => {
    if(manage.userNameData !== []){
        setAutoData(manage.userNameData)
    }
},[manage.userNameData])

3、因为我这个组件可以直接绑定数据源，其实我直接数据源头，写上这个store里面的值就好

<Auto
                dataSource={manage.userNameData}
                allowClear={true}
                style={{ width: 250 }}
                filterOption={(inputValue, option: any) =>
                    option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
                }
                notFoundContent={<Empty />}
                placeholder="Please input or select"
                onChange={(e) => setUserNameValue(e)}
                value={autoValue}
            />

大家可以再看看下面这个小demo

let test = async() => {
    let data = await test1()
    console.log(data)
    console.log(3)
}

 

let test1 = () => {
    return test2().then(data=>{ return data })
}

 

let test2 = async() => {
    return await test3()
}

 

let test3 = () => {
    return new Promise(reslove=>{
        setTimeout(()=>{
            reslove('hello')
        }, 1000)
    })
}

 
console.log(1)
test()
console.log(2)

Redux原理分析以及使用详解（TS && JS)