React从入门到项目--第七天（redux的使用）

傷城~ 2023-06-08 09:29 11阅读 0赞

### **redux简介** ###

什么是redux呢？redux是一个独立专门用于做状态管理的 JS 库，它不是不是 react 插件库，也就是说它不仅可以用在React项目中，还可以用在其他的项目中，只是更多的用在React项目中而已。那什么是插件库呢？插件库我是这样理解的，有相应的依赖，比如说React的插件库，离开React是不能正常工作的，jQuery插件库必须依赖与jQuery。

redux的作用就是：集中式管理 react 应用中多个组件共享的状态，比如说我们刚开始学习的时候，都是使用的state，在多个组件使用的时候，还需要通过props进行传递，相对来说还是比较麻烦的，有了redux之后，可以把多个组件都需要的状态，交给redux，通过redux进行集中管理。

### **redux的工作流程** ###

redux的工作流程大概是这个样子的，React组件可以直接通过store对象读取相关的state，但是在需要进行状态更新的时候就要执行相应的流程，大概是这个样子的，需要通过dispatch提交一个action，同时把旧的state一并交给对应的reducer，这时候reducer会返回一个新的state进行数据的更新。

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1bnRfYm8_size_16_color_FFFFFF_t_70][]**

看起来这个过程挺复杂的，其实在不管多少个状态，其实只有这些步骤，随着以后项目的越来越大，相对于原来的state在组件里定义就会显得简单得多，毕竟不用来来回回的传值，况且更新组件state的值也要提交setState。

### 使用时机 ###

redux也不是什么时候都要去使用的，需要整体来考虑，总的来说能不用就不用（项目比较小的情况下），在不用redux写起来比较吃力的时候才去用它。还有什么情况建议使用呢，比如说有一个状态在每个组件都要用到，或者说一个组件需要改变全局状态或者一个组件需要改变另一个组件的状态。

### 核心API ###

**createStore()**

简单来说，createStore（）见名知意，就是用来创建包含指定 reducer 的 store 对象。

import {createStore} from 'redux' 
    import counter from './reducers/counter' 
    const store = createStore(counter)

**store**

redux 库最核心的管理对象，在其内部维护着state和reducer，他有三个核心方法。

getState() 用来直接从store只能够读取state

const {count} = this.props.store.getState();

dispatch(action) 用来提交相应的action

this.props.store.dispatch({type:INCREMENT,data:number})

subscribe(listener)用来实时更新状态在界面中的展示

ReactDOM.render(<App store={store} />,document.getElementById('root'));
    
                    ||
                    ||
                    ||
                    ||
                   \  /
                    \/
    
    function render(){
        ReactDOM.render(<App store={store} />,document.getElementById('root'));
    }
    render();
    store.subscribe(function () {
        render();
    });

### redux的核心概念 ###

**action**

标识要执行行为的对象，包含两个属性type: 标识属性, 值为字符串, 唯一, 必要属性，xxx: 数据属性, 值类型任意, 可选属性，建议xxx还是data比较规范

const action = {
        type: 'INCREMENT', data: 2
    }

Action Creato(创建 Action 的工厂函数)

const increment = (number) => ({type: 'INCREMENT', data: number})

**reducer**

根据老的 state 和 action, 产生新的 state 的纯函数

export default function counter(state = 0, action) {
        switch (action.type) {
            case 'INCREMENT':
                return state + action.data
            case 'DECREMENT':
                return state - action.data
            default:
                return state
        }
    }

**store**

将 state,action 与 reducer 联系在一起的对象，那么如何得到此对象呢？

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

store的功能getState(): 得到 state dispatch(action): 分发 action, 触发 reducer 调用, 产生新的 state subscribe(listener): 注册监听, 当产生了新的 state 时, 自动调用。

### redux使用 ###

redux在使用的时候建议，在src文件夹下直接建一个redux的文件夹

![20191017211510821.png][]

在action-types中，向外暴露的是各个定义的字符串变量，用于定义各个组件以及相关用到的type类型

actions中用于生成\{type:INCREMENT,data:number\}

reducers向外暴露多个reducer

store用于生成创建store管理counter和action

import {createStore} from 'redux'
    import {counter} from './reducers'
    
    const store = createStore(counter);
    
    export default store

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1bnRfYm8_size_16_color_FFFFFF_t_70]: /images/20230531/f9cd2fb0f26c47a4aa7b20900f800236.png
[20191017211510821.png]: /images/20230531/5fc4ea72116b449090e84726c4a197e2.png