redux，react-redux使用基础流程，redux使用基础

最新推荐文章于 2023-05-01 04:42:16 发布

YH_ang_eng

最新推荐文章于 2023-05-01 04:42:16 发布

阅读量254

点赞数 2

文章标签： react redux 基础使用流程详解

本文链接：https://blog.csdn.net/YH_ang_eng/article/details/93234460

版权

本文介绍了Redux和React-Redux的基础使用流程，阐述了Redux的设计思想和三大原则。通过一个todolist的例子，展示了如何使用Redux进行状态管理，包括创建store、actionCreators、reducers以及组件的交互。同时提出了在实际使用中可能遇到的三个问题，为Redux的进阶学习留下思考。

摘要由CSDN通过智能技术生成

react-redux

redux

redux也是一个架构思维，在这个架构思维中 React 充当是视图 V
先来看图：
在这里插入图片描述

Store 数据的管理者和数据的存储者
actionCreators 动作的创建者和发送者，发送动作给 reducers
react Components 组件（用来充当视图层），进行用户交互
reducers 数据的修改者，返回一个新的 newstate 给store

React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。有两个方面，它没涉及。
- 代码结构
- 组件之间的通信

2013年 Facebook 提出了 Flux 架构的思想，引发了很多的实现。2015年，Redux 出现，将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构。

如果你不知道是否需要 Redux，那就是不需要它

只有遇到 React 实在解决不了的问题，你才需要 Redux

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

Redux的设计思想：

Web 应用是一个状态机，视图与状态是一一对应的。
所有的状态，保存在一个对象里面（唯一数据源）。

注意：flux、redux都不是必须和react搭配使用的，因为flux和redux是完整的架构，在学习react的时候，只是将react的组件作为redux中的视图层去使用了。

Redux的使用的三大原则：

Single Source of Truth(唯一的数据源)
State is read-only(状态是只读的)
Changes are made with pure function(数据的改变必须通过纯函数完成)

Redux的流程：

在这里插入图片描述

store通过reducer创建了初始状态

    import {
    createStore } from 'redux';

    import reducer from "./reducer";	//引入reducer

    const stort = createStore ( reducer )	//通过reducer创建了初始状态

    export default stort;

view通过store.getState()获取到了store中保存的state挂载在了自己的状态上

     constructor () {
   
            super()

            this.state = {
   
                todos :  store.getState().todos  //获取到了store中保存的state挂载在了自己的状态
            }

        }

用户产生了操作，调用了actions 的方法

import * as type from './type'	//事件类型 ，单独拆了出来
import store from './index'
const actionCreators = {
   

    add ( val ) {
   		//调用该方法
        /* 可以前后端数据交互 */
        const action = {
   
            type: type.ADDTODO,
            payload: val   // 负载
        }
        store.dispatch( action )
    }
}
export