react项目中使用redux

本文介绍了如何在React项目中使用Redux。首先通过创建一个React项目作为起点,接着讲解了如何引入并安装必要的Redux库。随后,描述了在项目文件结构中创建Redux相关文件的过程,并给出了运行项目的命令及其预期效果。
摘要由CSDN通过智能技术生成
react项目中使用redux
  • 首先创建react项目,我使用的是create-react-app,创建了一个pro项目
create-react-app pro
  • 一般我会引用antd组件,这样会很方便
  • 然后就是引入redux,先下载下面这些库:
// 我比较喜欢用yarn命令
yarn add redux react-redux redux-thunk

// 或者你可以使用npm
npm i redux react-redux redux-thunk --save
  • 接下来就是使用redux的使用步骤
  1. 现在src文件夹下面创建一个store文件夹,store文件夹内的文件如图:
- store
- - index.js //这里是导出store
- - state.js // 这里存放初始化的数据
- - reducers.js // 这里存放真正的state数据
- - action.js // 这里存放触发数据更新的方法
  1. 接下来就是使用redux
// state.js 
// 存放初始刷的数据
const state = {
   
    count: 0
}

export default state
// reducers.js
// 存放真正的数据
import initState from './state'
import {
    combineReducers } from 'redux'
function count(state=initState.count, action){
   
    switch(action.type){
   
        case 'INCREASE':
            return s
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值