react基础04--redux 管理数据

最新推荐文章于 2022-10-21 21:14:51 发布
最新推荐文章于 2022-10-21 21:14:51 发布
阅读量1.9k 收藏 2
点赞数
分类专栏： web 前端 文章标签： react.js redux管理数据 axios redux-thunk react 修改store数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011127242/article/details/122385804
版权

react基础04--redux 管理数据

1 介绍

react基础03–render渲染、组件生命周期、组件通信 中介绍了React render渲染、组件生命周期、组件通信等重要知识。本文在其基础上继续介绍 redux 数据管理的方法，并配以实际案例。

实际项目中，很多时候需要在多个组件或者多个页面显示统一个数据，例如商品数量，如果通过参数传递就显得很麻烦。此时我们就可以通过redux事项数据管理。

2 方法&案例

安装 redux 模块:
npm i redux --save
安装后在 package.json 中就可以看到 { “dependencies”: {“redux”: “^4.1.2”}}

在多个组件中使用Store中的数据

  1. 定义Store.js 文件，引用 createStore函数，返回 createStore 的回调
  2. 在哪里使用就在哪里调用，分别在 App.js 和 Demo.js 中通过 Store.getState().name 访问Store中的数据即可，不需要各种复杂的传参步骤

vim index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App 2-1</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

vim index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Demo from './Demo';

ReactDOM.render(
    <Demo />
  ,document.getElementById('root')
);

vim Demo.js

import React, { Component } from 'react'
import App from './App';
import Store from './Store';

export default class Demo extends Component {
    constructor(){
        super();
        this.state = {
            msg: Store.getState().name
        }
    }
    render() {
        return (
            <div>
                <h1>this demo's Component, msg={this.state.msg}</h1>
                <App />
            </div>
        )
    }
}
export default Demo

vim App.js

import React, { Component } from 'react'
import Store from './Store'

export class App extends Component {
    constructor(){
        super()

        this.state = {
            name: Store.getState().name
        }
    }
    render() {
        return (
            <div>
                this App is: {this.state.name}
            </div>
        )
    }
}
export default App

vim Store.js

import { createStore } from 'redux'

const defaultState = {
    name: 'tom'
}
const store = createStore((state = defaultState,action)=>{
    return state;
    }
);
export default store

结果：
在这里插入图片描述

规范 store 写法

当需要存储的数据较多的时候，如果将所有的数据都放在 Store.js, 那么将会很冗余，因此需要将其拆分出为一个单独的 reducer.js
vim App.js

import React, { Component } from 'react'
import Store from './Store'
import Header from './Header'
import Content from './Content'
import Footer from './Footer'

export class App extends Component {
    constructor(){
        super()
        this.state = Store.getState()
    }
    render() {
        return (
            <div>
                <h2> App.js: {this.state.name} </h2>
                list: {this.state.list}
                <Header />
                <Content />
                <Footer />
            </div>
        )
    }
}
export default App

vim reducer.js

const defaultState = {
    name: 'tom',
    list: [1,2,3,4,5]
}

export default ((state = defaultState,action)=>{
    return state;
    }
);

vim Store.js

import { createStore } from 'redux'
import reducer from './reducer';

const store = createStore(reducer);
export default store

结果：
在这里插入图片描述

修改Store中的数据

当前端有操作的时候，可以捕获事件，在事件中将具体信息分发给reducer；
在reducer 中需要通过 action.type 来确认是哪个组件派发的，并将数据返回；
同时需要在组件中新增Store.subscribe函数，当其检测到更新就将数据更新到组件中；

vim reducer.js

const defaultState = {
    name: 'tom',
    list: [1,2,3,4,5]
}

export default (state = defaultState,action)=>{
    if (action.type === 'change_name'){
        let tmpState = state;
        tmpState.name = action.name;
        return tmpState
    }
    return state
};

vim Content.js

import React, { Component } from 'react'
import Store from './Store'

export class Content extends Component {
    constructor(){
        super()
        this.state = Store.getState()

        Store.subscribe(()=>{
            console.log(Store.getState());
            this.setState(Store.getState())
        })
    }    
    render() {
        return (
            <div>
                内容 {this.state.name} 
                <p>
                    <input input={this.state.name} onChange={this.change.bind(this)}/>
                    <button>提交</button>
                </p>
            </div>
        )
    }
    change(e){
        let inputValue = e.target.value;
        console.log(inputValue)
        let action = {
            type: 'change_name',
            name: inputValue
        }
        Store.dispatch(action) // 把action 对象派发给reducer
    }
}
export default Content

输出结果：
默认为 tom
在这里插入图片描述
输入bob后更新为bob
在这里插入图片描述

注意：
如果只在change(e)事件中使用 this.setState， 那么只会更新 Content 组件。

        this.setState({
            name: inputValue
        })

如果需要其它组件也更新相关字段，那么需要在其它组件中添加 Store.subscribe 函数。

refs属性获取元素对象

在 修改Store中的数据 中， 每次input中有变动就更新给各个组件，有时候需要输入完毕，点击提交的时候才将信息更新给不同的组件。
此时我们需要设置button 的onClick 事件，并且通过 input 的refs 获取元素的对象，并将该元素的值派发给reducer。

vim Content.js

import React, { Component } from 'react'
import Store from './Store'

export class Content extends Component {
    constructor(){
        super()
        this.state = Store.getState()

        Store.subscribe(()=>{
            this.setState(Store.getState())
        })
    }    
    render() {
        return (
            <div>
                内容 {this.state.name} 
                <p>
                    <input ref="inputValue"/>
                    <button onClick={this.click.bind(this)}>提交</button>
                </p>
            </div>
        )
    }
    click(){
        let inputValue = this.refs.inputValue.value;
        console.log(inputValue)
        let action = {
            type: 'change_name',
            name: inputValue
        }
        Store.dispatch(action) // 把action 对象派发给reducer
    }
}
export default Content

redux-thunk 中间件

安装组件

npm i axios --save
npm i redux-thunk --save

以上都是通过派发变量的方式改变参数，如果想派发函数，那么就需要redux-thunk中间件了。
需要在Store.js 中 createStore 引入 pplyMiddleware(thunk) 参数，在reducer.js 中引入对应的处理方法；
程序启动的时候将getList函数派发给thunk;
thunk 再将对应的数据派发给 reducer;
当 App 中的模块监听到 reducer的变动后，就会更新对应的数据。

vim data.json

{
    "list": [5,6,7,8,9]
}

vim reducer.js

const defaultState = {
    name: 'tom',
    list: [1,2,3,4,5]
}

export default (state = defaultState,action)=>{
    if (action.type === 'change_name'){
        let tmpState = state;
        tmpState.name = action.name;
        return tmpState;
    }
    // 初始化list
    if (action.type === 'init_list'){
        console.log(action);
        let tmpState = state;
        tmpState.list = action.list;
        return tmpState;
    }
    return state
};

vim Store.js

import { createStore, applyMiddleware } from 'redux'
import reducer from './reducer';
import thunk from 'redux-thunk'

const store = createStore(reducer, applyMiddleware(thunk));
export default store

vim App.js

import React, { Component } from 'react'
import Store from './Store'
import Header from './Header'
import Content from './Content'
import Footer from './Footer'
import axios from 'axios'

export class App extends Component {
    constructor(){
        super()
        this.state = Store.getState()
        Store.subscribe(()=>{
            this.setState(Store.getState())
        })
    }
    componentDidMount(){
        Store.dispatch(this.getList()) // 先派发给thunk
    }
    getList(){
        return (dispatch)=>{
            axios.get("http://localhost:3000/data.json")
            .then((resp)=>{
                // console.log(resp.data)
                let action = {
                    type: 'init_list',
                    list: resp.data.list
                }
                dispatch(action) //派发给reducer
            })
        }
    }
    render() {
        return (
            <div>
                <h2> App.js: {this.state.name} </h2>
                list: {this.state.list}
                <Header />
                <Content />
                <Footer />
            </div>
        )
    }
}
export default App

启动输出：
在这里插入图片描述

3 注意事项

  1. 如果只是分发不同变量，直接用普通的reducer即可；如果需要分发函数，那么需要使用 redux-thunk 组件来实现。

4 说明

软件版本:
node 16.13.1
create-react-app 5.0.0
参考文档：
React基础入门+综合案例
react 官网
React基础入门教程
中国 NPM 镜像

昕光xg
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
25.使用redux对详情页面进行数据管理
zhuhui2000的博客
06-13 419
1.我们需要使用store进行数据管理，首先我们需要在detail目录下新建四个文件，actionCreatores,actionTypes,index,reducer 2.index.js文件中：引入actionCreators和actionTypes并且将其导出 import * as actionCreators from './actionCreators'; import * as a...
简书 React-Redux进行数据的管理
weixin_48294709的博客
06-14 319
redux
Redux数据集中管理
xiaofiy的博客
09-30 238
Redux数据集中管理一、滤清关系二、react原理图大白话讲解原理图：三、搭建步骤store.js中所要做的事：action中所要做的事：reducers中所要做的事：具体组件中使用项目根文件index.js 文件中所要做的事： 一、滤清关系 React ： 前端语言框架 Redux ：状态集中管理的架构 React-Redux：React 专用进行状态集中管理的库 首先Redux 跟React 没有关系，他俩是两个不同公司的产物，当然Vue中也可以使用redux,但是大家都习惯在vue项目中用vuex来
Redux实现数据统一管理 详解
柯晓楠
03-31 732
1、什么是Redux Redux 是React生态中重要的组成部分。很多人都说，简单的应用可以不用此工具。但是我个人认为，中小型应用使用的话，可以使文件结构更加规范，代码可读性更强。因为React提出将展示组件与容器组件分离的思想，所以降低了React 与Redux之间的耦合度。 Redux是一个流行的JavaScript框架，为应用程序提供一个可预测的状态容器。Redux基于简化版本的Flux...
React中如何使用Redux管理数据
weixin_34150224的博客
09-16 370
内容简介 本内容是基于实实在在的项目开发提炼出来的解决方案，手把手教你如何在React中使用Redux来进行数据管理，该案例可以直接在项目中使用；本文中不会介绍原理什么之类的，网上一大堆。本内容适合有react开发基础的人学习，希望对大家有帮助。 目录结构 1 按类型分这里的类型指的是一个文件在项目中充当的角色类型，即这个文件是一个component，还是一个container，或者是一个r...
react-redux-creator:redux集合
05-06
redux-saga, seamless-immutable, connected-react-router, 简化了redux/异步处理和路由集成的配置工作，开箱即用使用redux常常需要创建大量的常量字面量，手动创建actions, 以及相应的reducers进行数据处理，并且...
next-react-native-redux:Redux应用启动以响应本机
05-15
下一个React本机redux 用于响应本机的Redux应用程序启动。 选项： 名称 类型 价值 描述 根 ReactInstnace 空值 您的应用程序的根元素（React元素） 记忆 目的 {} 应用程序内存数据存储 要求 目的 {} 申请请求...
React通过redux-persist持久化数据存储的方法示例
10-17
主要介绍了React通过redux-persist持久化数据存储的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
全栈项目招聘网站（react+react-router-dom+redux+react-redux+redux）源码
01-27
搭建项目 ...3) redux+react-redux+redux-thunk 管理应用组件状态4) 学会使用 antd-mobile 组件库构建界面 5) mongoose 操作 mongodb 数据库 6) express 搭建后台路由 7) socket.io 实现实时通信 8) blue
react-webpack-typescript-template:一个react模板，使用react，react-dom，webpack，typescript，redux，react-redux，redux-logger，redux-thunk，redux-promise，connected-react-router ..
05-20
一个react模板，使用react，react-dom，webpack，打字稿，redux，react-redux，redux-logger，redux-thunk，redux-promise，connected-react-router ... 它现在有一些页面，您可以将这些页面用作其他页面的示例...
React使用Redux管理数据
marsur的博客
12-19 135
1.文件目录 2.state.js export default { areaIndex: 0, token: { accessToken: '', idToken: '', refreshToken: '' } } 3.index.js Redux 提供createStore这个函数，用来生成 Store。 createStore函数接受另一个函数作为参数，返回...
Redux 异步数据管理
青蛙king的博客
03-01 934
前言 redux 只处理同步数据流，异步数据流交给 “中间件” 处理。 redux 中间件经历了三次发展： redux-thunk redux-promise redux-saga 一、中间件的概念 “中间件的概念”引自阮一峰老师的博客《Redux 入门教程（二）：中间件与异步操作》，欲进一步学习请自行加餐阮老师准备的盛宴。 为了理解中间件，让我们站在框架作者的角度思考问题：如果要添加功能，你会在哪个环节添加？ （1）Reducer：纯函数，只承担计算 State 的功能，不合适承担.
React项目中中使用redux进行数据管理
limingxiaojie的博客
07-10 661
一、使用cnpm install redux --save和cnpm install react-redux --save命令下载 二、在src目录下创建store文件夹，再在store文件夹中创建index.js文件和reducer.js文件 三、在刚刚创建好的index.js文件中引入 import { createStore } from 'redux'; import redu...
react redux 数据状态管理
yu13767514297的专栏
10-15 1253
   大家都知道redux是可以进行全局数据的一个状态的管理，下面就以实例的方式给大家展现一下redux是如何进行数据状态管理的。 首先我们需要引入redux 的包： 包引入成功之后，我们需要定义其相应的参数： 首先我们来定义reducer文件，如图： 然后我们来定义相应的store文件，如图： 然后我们定义actions文件，这个文件是组件用来调用的方法，组件调用这里面相应的方法就...
使用React-redux 进行应用数据的管理
purple_lumpy的博客
03-28 169
React 在处理小型的项目的时候是完全可以的。但是在处理复杂的项目时，React 自己是不够的。我们还需要使用redux 框架，帮助我们管理数据。 如果我们使用了redux 管理数据，那我们尽量把数据都放到redux 中进行管理。 下面，我们先把Header 组件中的focus 属性放到redux 中进行管理。 先下载安装 redux 与 react-redux yarn add red...
使用Redux表单在React中管理表单状态
08-15 216
介绍 (Introduction) redux-form is a great way of managing forms that are powered by Redux. It is a Higher-Order-Component (HOC) that uses react-redux to make sure HTML forms in React use Redux to store...
【译】像数据库一样设计你的 redux 数据
weixin_33785108的博客
08-04 77
翻译：疯狂的技术宅作者：Nick Sweeting英文标题：Shape your redux store like your database英文原文：https://hackernoon.com/shape-...说明：本专栏文章首发于公众号：jingchengyideng 。 使用索引可以从多个维度表现数据。(此处应为动图，请看原文...
如何使用react-redux对我们数据进行管理。
m0_70718568的博客
10-21 361
如何使用react-redux，使用hooks编写组件，如何使用中间键，如何使用redux-thunk
redux---模块化管理
逆风飞翔的代码狗
07-10 451
redux的模块化 上一步我们已经对state、actions进行了处理，进一步对代码进行优化： handleClick(){ const action={ type:'add_count', value:1 } store.dispatch(action) } 首先是这一块，我们可以在store下面建立一个actionCreators.js,将action提取到一个文件里面去： actionCreators.js // 定义所有的请求 //
react-redux和redux的区别
最新发布
09-16
React-Redux 是一个将 Redux 和 React 集成在一起的库，它可以帮助我们更方便地在 React 应用中使用 Redux。Redux 是一个 JavaScript 状态容器，用于管理应用中的所有状态。Redux 通过将应用的状态存储在一个单一状态树中，并通过动作来更新状态，使得一些复杂的应用变得更容易管理。因此，React-Redux 和 Redux 是两个不同的库，React-Redux 是为了更好地在 React 应用中使用 Redux 而创建的。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

昕光xg

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值