react中用redux进行状态管理

最新推荐文章于 2024-01-14 15:24:17 发布
最新推荐文章于 2024-01-14 15:24:17 发布
阅读量270 收藏
点赞数
文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39174685/article/details/110704553
版权

react中用redux进行状态管理

文件目录结构

|-- README.md
|-- package.json
|-- public
|   `-- index.html
|-- src
|   |-- components // 放UI组件，即代码不含redux内容
|   |   `-- counter.js
|   |-- containers // 放容器组件，即代码含redux内容
|   |   `-- App.js
|   |-- index.js
|   `-- redux
|       |-- action-types.js
|       |-- actions.js
|       |-- reducers.js
|       `-- store.js
`-- yarn.lock

需要使用的库和插件

redux

  • 下载
    npm install --save redux
  • 使用场景
    • store.js
    import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';

import {counter} from './reducers';

export const store = createStore(
    counter,
    applyMiddleware(thunk)
);
    1. createStore用于创建store对象，store的作用是管理state,action和reducer
    2. applyMiddleware用于应用中间件，如上所示，代码使用了thunk中间件，使redux可以编写异步代码
    • reducers.js
    import {combineReducers} from 'redux';

function counter(state = 0, action) {
  ···
  ···
}

function counter2(state = 0, action) {
  ···
  ···
}		
export default combineReducers({
  counter，
  counter2
})

// redux向外暴露的state是对象结构
// {counter: counter的state, counter2: counter2的state}
    1. 当reducers.js只有一个reducer对象，则可以不使用combineReducers方法，直接export defaultreducer对象即可

react-redux

  • 下载

    npm install --save react-redux

  • 使用场景

    • index.js
    ···
import {Provider} from 'react-redux';
import {store} from "./redux/store";
···	

ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>,
    document.getElementById('root')
);
    1. store对象以属性的形式传给Provider组件
    • app.js
    import {connect} from 'react-redux';

import {Counter} from '../components/Counter';
import {increment, decrement, incrementAsync} from '../redux/actions';

export default connect(
    state => ({count: state}),
    {increment, decrement, incrementAsync}
)(Counter);
    1. 将react和redux进行连接，通过connect将state和action以属性的形式传递给Counter组件

redux-thunk

  • 下载
    npm install --save redux-thunk
  • 使用场景
    • store.js
    import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';

import {counter} from './reducers';

export const store = createStore(
    counter,
    applyMiddleware(thunk)
);
    1. thunk以中间件的形式添加到store对象中，使原本不支持异步的redux支持异步代码

prop-types(可选)

  • 下载
    npm install --save prop-types
  • 使用场景
    • Counter.js
    export class Counter extends Component{
  static propTypes = {
    count: PropTypes.number.isRequired,
    increment: PropTypes.func.isRequired,
    decrement: PropTypes.func.isRequired,
    incrementAsync: PropTypes.func.isRequired
  }
  ···
  render(){
	  return (
	  ···
	)
}
    1. 非必要步骤，但是添加propTypes事先声明props中含有的属性值，更加严谨

redux-devtools-extension(用于redux调试)

  • 下载
    npm install --save-dev redux-devtools-extension
  • 使用场景
    • store.js
    import {composeWithDevTools} from 'redux-devtools-extension';
······

export const store = createStore(
    counter,
    composeWithDevTools(applyMiddleware(thunk))
);
    1. 需要配合Chrome插件ReduxDevTools进行使用

src/下各文件的内容

src/redux/action-types.js

  • 存放固定的常量信息，在需要的文件中进行引用，以防拼写出错
    export const INCREMENT = "increment";
export const DECREMENT = "decrement";

src/redux/actions.js

  • 存放生成action的工厂函数，同步代码返回对象，异步代码返回函数（前提是使用上了redux-thunk）
    // 从action-types中引入常量
import {INCREMENT, DECREMENT} from "./action-types";

// 同步代码，返回对象
export const increment = (data) => ({type: INCREMENT, data});
export const decrement = (data) => ({type: DECREMENT, data});

// 异步代码，返回函数
export const incrementAsync = (data) => {
    return dispatch => {
        setTimeout(()=>{dispatch(increment(data))}
        ,1000)
    }
};

src/redux/reducers.js

  • 存放reducer，用于在store.js文件中引用并生成store对象
    import {combineReducers} from 'redux';

// 从action-types中引入常量
import {INCREMENT, DECREMENT} from "./action-types";

export function counter(state=0, action) {
    switch (action.type) {
        case INCREMENT:
            return state + action.data;
        case DECREMENT:
            return state - action.data;
        default:
            return state
    }
}
export default combineReducers({
	  counter
})

src/redux/store.js

  • 生成store对象，并向外暴露给index.js
    import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import {composeWithDevTools} from 'redux-devtools-extension';

import reducers from './reducers';

export const store = createStore(
    reducers,
    composeWithDevTools(applyMiddleware(thunk))
);

src/components/Counter.js

  • UI组件
    import React, {Component} from 'react';
import {PropTypes} from 'prop-types';

export class Counter extends Component{
  static propTypes = {
    count: PropTypes.number.isRequired,
    increment: PropTypes.func.isRequired,
    decrement: PropTypes.func.isRequired,
    incrementAsync: PropTypes.func.isRequired
  }

  increment = () => {
    const val = this.select.value*1;
    this.props.increment(val)
  }

  decrement = () => {
    const val = this.select.value*1;
    this.props.decrement(val)
  }

  incrementAsync = () => {
    const val = this.select.value*1;
    this.props.incrementAsync(val)
  }

  render() {
    const count = this.props.count;

    return (
        <div>
          <p>click {count} times</p>
          <div>
            <select ref={select => this.select = select}>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>
            &nbsp;
            <button onClick={this.increment}>+</button>&nbsp;
            <button onClick={this.decrement}>-</button>
            <button onClick={this.incrementAsync}>incrementAsync</button>
          </div>
        </div>
    );
  }
}

src/containers/App.js

  • 容器组件，由于reducers.js使用了combineReducers，所以connect函数中要通过state.counter指定使用哪个state;若reducers.js只有一个reducer且没有使用combineReducers，则以下代码的state.counter改成state即可
    import {connect} from 'react-redux';

import {Counter} from '../components/Counter';
import {increment, decrement, incrementAsync} from '../redux/actions';

export default connect(
    state => ({count: state.counter}), // mapStateToprops
    {increment, decrement, incrementAsync} // mapDispatchToProps
)(Counter);

总结

|-- README.md
|-- package.json
|-- public
|   `-- index.html
|-- src
|   |-- components // 放UI组件，即代码不含redux内容
|   |   `-- counter.js // 不需要使用redux相关库
|   |-- containers // 放容器组件，即代码含redux内容
|   |   `-- App.js // 使用react-redux({connect})
|   |-- index.js // 使用react-redux({Provider})
|   `-- redux
|       |-- action-types.js
|       |-- actions.js
|       |-- reducers.js // 使用redux({combineReducers})
|       `-- store.js // 使用redux({createStore, applyMiddleware}), redux-thunk(thunk), redux-devtools-extension({composeWithDevTools})
`-- yarn.lock
Jianrong_Lyu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React学习28（redux-devtools使用）
xiaojian044的博客
12-18 691
redux-devtoos安装使用
React开发者工具和Redux开发者工具的使用。
l1811800822的博客
05-06 599
一、React开发者工具 应用商店下载React Developer Tools
React 之 Redux - 状态管理
玄鱼殇
08-03 2074
React 之 Redux - 状态管理
状态管理redux（超细）
weixin_71972062的博客
01-14 412
对于大的应用 来说，不大可能仅仅只写一个这样的函数，所以我们编写很多小函数来分别管理 state。actionCreator中进行，但是如果直接这样写会报错那我们需要把。是纯函数，内部不能进行异步操作。本质上就是一个纯函数。以上就是rdeux的基本介绍与使用，如有错误请指正！这两个概念很容易混在一起， 使用时最好注意区分。的时候我们实现兄弟组件传值是比较麻烦的。依然是留给我们自己来管理。是一个用于描述已发生事件的普。使用纯函数来执行修改：为了描述。串起来，开发一些函数，这就是。的状态容器就是装状态的容器。
React状态管理Redux的使用
月光晒了很凉快的博客
09-26 702
React-Redux 是 Redux 的官方针对 React 开发的。
react-redux中connect的装饰器用法@connect详解
11-27
最近在琢磨react中的一些小技巧，这篇文章记录一下在redux中用装饰器来写connect。  通常我们需要一个reducer和一个action，然后使用connect来包裹你的Component。假设你已经有一个key为main的reducer和一个action....
covid19：在React和Redux中用爱制造
02-18
covid19：在React和Redux中用爱制造
React_Redux_comportable_ver
05-06
这个名为"React_Redux_comportable_ver"的学习资源着重于如何更舒适、高效地使用Redux与React进行开发。下面将详细阐述这两个库的主要概念以及如何在实际项目中组织学习。 首先，React是一个由Facebook开发的库，它...
react-reactreduxnotification在你的ReactRedux应中用最简单的方式实现通知系统
08-15
在React应用中，我们可以创建一个全局的状态管理器，通过Redux来存储和更新通知的状态。`react-redux-notification` 提供了一个简洁的API，使得在应用中添加通知变得极其简单。 首先，你需要安装`react-redux`和`...
react_redux-list-of-posts
03-11
React + Redux帖子列表在中用您的Github用户名替换<your> 遵循描述使用Redux可以实现所有功能，包括过滤（带有反跳的（（*）））。 此外，在每个帖子旁边添加一个按钮，并添加评论以将其删除。
React-redux全局状态管理
Celester_best的博客
02-24 2581
这篇博客是看一个网上视频的笔记，后面也会根据自己在项目开发过程中遇到的问题进行不断的更新。 Redux概述 什么是Redux Redux是一个用于Javascript状态容器，可以进行全局状态管理。 Redux可以构建一致化的应用，运行与不同的环境（客户端，服务器，原生应用），并且易于测试。 Redux除了和React一起使用外，还支持其他界面库，而且它体积很小（2KB）。 Redux的设计初衷 随着Javascript单页面开发日益复杂，Javascript需要管理更多的state(状态)，
模块开发之redux-devtools-extension调试工具使用详解(十一)
热门推荐
陈袁的博客
07-02 1万+
模块开发之redux-devtools-extension调试工具使用详解(十一) 模块开发之redux-devtools-extension调试工具使用详解(十一) 前言 安装调试工具插件 非侵入式 没有使用中间件的情况 使用中间件情况 侵入式 安装 没有使用中间件的情况 使用中间件情况 总结 在chrome浏览器里实战 前言 redux-devtools和r...
React教程之Redux状态管理
非著名程序猿
06-01 942
Redux 虽然是react的一个状态管理库，可以单独使用，接下来我们详细讲解下底层代码。 废话不多讲，先说下基本的知识点。 Actions actions 是通过 store.dispatch(action)改变 state的唯一方法，不能直接通过 this.state = {} 来直接改变 state。 生成 actions 有两种方式： 1、单纯的 object const action...
React学习（六）— 状态管理Redux
小绵杨
07-27 1212
刚开始你可以只有一个reducer，随着应用变大，你可以把它拆成多个小的reducers，分别独立地操作statetree的不同部分，因为reducer只是函数，你可以控制它们被调用的顺序，传入附加数据，甚至编写可复用的reducer来处理一些通用任务，如分页器。方法发送action，参数就是需要传递的action对象，然后reducer接收到action并处理，返回新的state，视图自动更新。将数组展开然后和新增的todo合并，对象同样可以使用扩展运算符达到新增属性的目的。......
【前端框架】——React——状态管理（redux）
weixin_44275259的博客
08-19 157
安装： npm install react react-dom --save
Redux的react-redux状态管理
weixin_45389051的博客
05-05 174
react-redux我个人认为比用redux写稍微简单那么一丢丢 下面还是通过一个案例来具体演示吧，点击让这个数增加 首先还是安装 sudo cnpm install react-redux --save 下面是代码，注释我基本都写在里面了 class Counter extends React.Component{ render(){ //计数,通过store的state传给pr...
React核心功能：Redux状态管理
鸭绒的博客
12-20 281
文章目录1. Redux介绍2.重要概念2.1 Store2.2 State2.3 Action2.4 store.dispatch()2.5 Reducer2.6 store.subscribe()3. 工作流程4.实例：计数器 1. Redux介绍 React只是一个DOM的抽象层，对于大型项目将会遇到组件之间的通信和代码结构等问题。而Redux将能解决状态管理问题，它用于中大型，数据比较庞大，组件之间数据交互多的情况下使用。但注意Redux的使用，Redux的创造者说过： “如果你不知道是否需要 R
react学习：状态管理redux和react-redux
weixin_44828005的博客
05-29 219
问题导向 react生命周期何时调用？以及应用场景？ 如果你都有了答案，可以忽略本文章，或去react学习地图寻找更多答案 学习更多 react学习地图
Redux-状态管理器
weixin_33802505的博客
05-26 528
简介 Redux是JS的状态管理器，便于我们更加清晰管理追踪应用程序中变化莫测的状态变更。Redux采用 单一数据流 的方式对数据进行管理，这种方式的好处在于只能从单一的方向进行数据变更，剔除了数据能五花八门改变的方式，有利于我们对数据的变化的追踪，同时降低项目后期的维护成本。 Redux状态管理器的核心思想: store状态树 action行为状态对象 reducer行为状态的处理 简单的说...
react-redux安装
最新发布
06-12
React-Redux是一个结合了React和Redux的库，它使得在React应用中集成状态管理变得更加容易。Redux是一个单一来源的状态管理库，而React-Redux提供了一组工具来帮助你将Redux的状态管理与React组件结合起来。 安装...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值