React之 redux 的简单介绍及使用

Posted 2022-09-02 zjl-712

1、为什么使用redux？
在小型react项目的开发中 ，view（视图层）中的数据模型（即数据），可以存放在组件中的 state 对象，换句话说页面中的动态数据存放在 state 中。

但对于开发大型复杂的项目来说，单页面管理的状态（state）会有很多很多。管理不断变化的状态非常困难，状态的改变可能会引起页面的变化，

而页面的变化也会引起状态的变化，这种变化异常复杂，以至于我们很难捋清业务实现功能，为此我们用到了 redux，使用 redux 管理大量的状态（state）。

2、什么情况下不使用redux？

• UI层非常简单（页面动态数据少）
• 不需要与服务器大量交互，也没有使用WebSocket
• view（视图层）数据来源是单一的。

3、什么情况下要使用 redux？

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

4、redux 的实现原理是什么 ？

我们知道视图的数据来源于state，或者说是一一对应的。redux 只是把所有复杂的状态抽离出来保存在一个对象里面，

当视图层需要用到数据的时候，通过模块导入这个对象即可。

5、在使用 redux 之前我们需要了解 redux 模块中的几个基本概念。

①Store可以看作为 redux 的核心，因为它是存放数据的地方，只要视图层的数据改变了意味着这里的数据也发生了改变，

所有的数据操作都是围绕着 store 中的数据进行操作。生成一个 Store，通过 redux 提供的 createStore 函数生成

 

// index.js
// 仓库 store
import createStore from ‘redux‘;
import reducer from ‘./reducer‘;
// 将reducer与store绑定  ，// 将生成的 Store 暴露出去 reducer 是一个函数（操作数据的函数）
export default createStore(reducer);

 

②Stat 通过生成的 Store 对象的 getState()对象可以拿到此时的 数据，即保存在 Store 中的数据。

 

 

// 这是一个自定义的组件模块 ToDo.js，通过这个模块模拟获取 store 中的数据
import React,  Component  from ‘react‘
import Button,Input,List from ‘antd‘;
// 引入 store 
import store from ‘../store/index‘;
export default class ToDo extends Component 
    constructor(props) 
        super(props);
        this.state = store.getState();// 拿到 store 中的数据

 

③ActionState的变化，会导致view的变化，但是用户是接触不到state的，只能接触到view。所以state的变化必须是view导致的。

Action是一个对象，用户触发一个事件（比如点击事件）会携带这个对象给 reducer 后面会讲到

//一个简单的 action 对象
let action = 
         type:‘TO_CNANGE_INPUT‘, // 代表Action的名称 是必须的
         value:e.target.value
 

// 改变 state 的唯一方法 就是使用 Action

// 传给 reducer 之后 会根据 type 做相应的数据处理

④store.dispatch() 是view发出Action的唯一方法

inputChange = (e)=>
        let action = 
            type:‘TO_CNANGE_INPUT‘,
            value:e.target.value
        
        // 分发action 给 store
        store.dispatch(action);
    

⑤Reducer Store接收到Action之后，将会返回一个新的 state。

reducer就是一个函数 它会处理传来的 Action 根据 Action 对象中的 type 处理相应的数据

// initState就是一个数据对象 保存在 store 中的数据
export default (state=initState,action)=>
    console.log(‘reducer‘);
    if(action.type===‘TO_CNANGE_INPUT‘)
        let obj = 
            ...state,
            inputValue:action.value
        ;
        console.log(obj);
        return obj;
    

⑥store.subscribe()该方法用来监听Store 中的State是否发生变化

export default class ToDo extends Component 
    constructor(props) 
        super(props);
        this.state = store.getState();// 拿到 store 中的数据
        store.subscribe(this.changeState);//订阅者做的事情,监听store中数据的变化，更新当前state中的数据
    

6.redux 的工作流程

react组件触发事件-----》再到Action Creators 发送 action 对象 给 Reducer 处理------》Reducer更新数据完成，返回新数据给 View 中的state ----》view 在通过更新过后的state 重新渲染页面。

 7.例子：React 配合 Redux 做一个备忘录，已发布到我的 GitHub上，有兴趣的话可以自行下载运行。

GitHub地址：https://github.com/ZhuJingLe/reduxAnli

如果嫌麻烦可留言找我要源代码^_^