案例：React+Redux使用异步Action实现加减

最新推荐文章于 2024-07-28 19:50:22 发布

秋末寒雨

最新推荐文章于 2024-07-28 19:50:22 发布

阅读量2.6k

点赞数

分类专栏： React React-native 文章标签： react jsx web html5

本文链接：https://blog.csdn.net/mutong19890803/article/details/53781563

版权

本文介绍了如何在React+Redux应用中使用异步Action实现加减功能。详细讨论了项目结构，包括`index.html`, `index.jsx`, `store.jsx`, `reducers.jsx`和`actions.jsx`中的关键部分。同步加减直接修改store中数据，而异步加减利用redux-thunk中间件，通过延时操作更新store，并在组件中监听state变化。" 113429297,10536150,MySQL十进制字段加法操作导致截断问题解析,"['数据库管理', 'MySQL', '数据类型', '数据处理', '编程异常']

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

1.首先看一下项目结构

QQ截图20161206154224

2.相关文件分析

1.1 public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="/static/bundle.js"></script>
</body>
</html>

其中id为root的div作为容器标签，bundle.js为打包后的js文件

2.1 public/js/index.jsx

import React from "react";
import ReactDOM from "react-dom";
import store from "./store.jsx";
import {doAsyncCount} from "./actions.jsx";

class AsyncCom extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            number: 0,
            asyncNumber: