Redux 原理 & 一般和异步使用

最新推荐文章于 2023-10-14 14:36:30 发布

カさま

最新推荐文章于 2023-10-14 14:36:30 发布

阅读量258

点赞数

分类专栏： # React跨层级通信文章标签：前端 react reactjs es6 javascript

本文链接：https://blog.csdn.net/TM_Godspeed/article/details/105766747

版权

本文介绍了Redux在前端开发中的应用，讲解了Redux的基本原理，通过TodoList案例展示了如何使用Redux进行状态管理。重点讨论了redux-thunk中间件的使用，解释了为何在处理异步操作时需要它，并提供了具体的使用示例。通过阅读，读者能够理解Redux的工作流程并掌握异步操作的处理方法。

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

为什么要用 Redux

在平时开发中，使用Redux最多的场景应该是进行React开发的时候了。而 React只是用于构建用户界面的 JS 库，如果涉及到复杂的组件通信仅仅使用React的话代码将变得非常冗余且难以维护；

而Redux则是帮助组件通信的一个库，因此适当地使用 Redux 会使得有复杂组件通信逻辑的项目更加轻盈、易读。

Redux 原理

在这里插入图片描述
我们先从组件开始分析，当组件要想更改仓库的数据时，它必须通过 Action Creators 向仓库发出一个 action；

当仓库接收到一个 action 时，仓库本身是不知道如何处理的，它只能将这个 action 和当前状态交给 Reducers 处理；

当 Reducers 处理完毕以后将会返回一个新状态给仓库；

但注意此时仓库的状态是更新了，但是组件并没有接受到仓库更新的消息，如果要在相应信息更新后组件也跟着更新，则组件要订阅一下仓库，这个就像订报纸、关注某个人一样的，你只有订了报纸或者点了关注，那么当天的动态你才能接收到，否则别人发生了什么事你都不会知道；

TodoList 案例

接下来本文将会使用一个 TodoList案例来演示 redux 的运用
在这里插入图片描述

src 目录结构

App.js

import React, {
    Component } from 'react';
import './app.css'
import {
    Input, Button, List } from "antd";
import store from "./store";
import {
   submit, deleteItem, inputAction} from "./store/actionCreators";

class App extends Component{
   
    constructor(props) {
   
        super(props);
        this.handleInput = this.handleInput.bind(this);
        this.subscribe = this.subscribe.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.state = store.getState();
        store.subscribe(this.subscribe);
    }

    render() {
   
        const {
    list, inputValue } = this.state;
        return(
            <div className="App">
                <div className="input-field">
                    <Input
                        placeholder={
   'todo info'}
                        style={
   {
   width: '270px', marginRight: '10px'}}
                        value={
   inputValue}
                        onChange={
   this.handleInput}
                    />
                    <Button
                        type={
   'primary'}
                        children={
   '提交'}
                        onClick={
   this.handleSubmit}
                    />
                </div>
                <List
                    bordered
                    dataSource={
   list}
                    style={
   {
   width: '270px'}