react中求和案例_redux完整版

肖肖冲鸭

于 2022-09-05 17:46:06 发布

阅读量323

点赞数

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_48952990/article/details/126709965

版权

本文档介绍了如何在React应用中使用Redux实现一个简单的计数器功能。通过新增多个文件，包括`count_action.js`来创建action对象，`constant.js`定义常量避免编码错误，`count_reducer.js`编写reducer，`store.js`配置Redux store，以及在`Components/Count/index.jsx`组件中调用这些功能。在`index.js`中整合整个应用。

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

新增文件：

count_action.js 专门用于创建action对象
constant.js放置由于编码疏忽写错action中的type

src---->redux—constant.js

/* 
    该模块是用于定义action对象中type类型的常量值,目的只有一个，便于管理的同时，防止出现拼写错误的情况
*/
export const INCREMENT='increment'
export const DECREMENT='decrement'

src---->redux—count_action.js

/* 
    该文件专门为Count组件生成action对象
*/
import {
   INCREMENT,DECREMENT} from './constant'
export const  createIncreamentAction = data => ({
    type:INCREMENT,data })
export const  createDecreamentAction = data => ({
    type:DECREMENT,data })

src—>redux—count_reducer.js

/* 
    该文件是用于创建一个为Count服务的reducer，reducer的本质就是一个函数
    reducer函数会接到两个参数，分别会：之前的状态(preState) ,动作对象(action)
*/
import {
   INCREMENT,DECREMENT} from './constant'
const initState=0