Redux使用讲解+案例

最新推荐文章于 2024-04-02 00:00:18 发布
最新推荐文章于 2024-04-02 00:00:18 发布
阅读量691 收藏
点赞数
分类专栏： react redux 文章标签： javascript 前端 react.js vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TongJ_/article/details/126893033
版权

状态（State）

state不过就是一个变量，一个用来记录（组件）状态的变量。组件可以根据不同的状态值切换为不同的显示，比如，用户登录和没登录看到页面应该是不同的，那么用户的登录与否就应该是一个状态。再比如，数据加载与否，显示的界面也应该不同，那么数据本身就是一个状态。

使用

使用Redux之前，你需要先明确一点Redux是JS应用的状态容器，它并不是只能在React使用，而是可以应用到任意的JS应用中（包括前端JS，和服务器中Node.js）。总之，凡是JS中需要管理的状态的Redux都可以胜任。

React中使用Redux

引入react-redux库

我们除了需要引入Redux核心库外，还需要引入react-redux库，以使React和redux适配，可以通过npm或yarn安装：

npm install -S redux react-redux

yarn add redux react-redux

创建reducer：

Redux是一个状态容器，所以使用Redux必须先创建容器对象，它的所有操作都是通过容器对象来进行的

const reducer = (state = {
    name: '孙悟空',
    age: 18,
    gender: '男',
    address: '花果山'
}, action) => {
    switch (action.type) {
        case 'SET_NAME':
            return {
                ...state,
                name: action.payload
            };
        case 'SET_AGE':
            return {
                ...state,
                age: action.payload
            };
        case 'SET_ADDRESS':
            return {
                ...state,
                address: action.payload
            };
        case 'SET_GENDER':
            return {
                ...state,
                gender: action.payload
            };
        default :
            return state
    }

};

创建store

createStore用来创建一个Redux中的容器对象，它需要三个参数：reducer、preloadedState、enhancer。

1、reducer是一个函数，是state操作的整合函数，每次修改state时都会触发该函数，它的返回值会成为新的state。

2、preloadedState就是state的初始值，可以在这里指定也可以在reducer中指定。

3、enhancer增强函数用来对state的功能进行扩展

Redux.createStore(reducer, [preloadedState], [enhancer])

const store = createStore(reducer);

创建store后，需要引入react-redux中提供的Provider组件，将其设置到所有组件的最外层，并且将刚刚创建的store设置为组件的store属性，只有这样才能使得Redux中的数据能被所有的组件访问到。

设置provider：

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={store}>
        <App/>
    </Provider>
);

钩子函数useSelector

钩子函数useSelector，用于获取Redux中存储的数据，它需要一个回调函数作为参数，回调函数的第一个参数就是当前的state，回调函数的返回值，会作为useSelector的返回值返回，所以state => state表示直接将整个state作为返回值返回。

const stu = useSelector(state => state);

<p>
    {stu.name} -- {stu.age} -- {stu.gender} -- {stu.address}
</p>

useDispatch派发器-操作数据

useDispatch同样是react-redux提供的钩子函数，用来获取redux的派发器，对state的所有操作都需要通过派发器来进行。

通过派发器修改state：

dispatch({type:'SET_NAME', payload:'猪八戒'})
dispatch({type:'SET_AGE', payload:28})
dispatch({type:'SET_GENDER', payload:'女'})
dispatch({type:'SET_ADDRESS', payload:'高老庄'})

完整举例

import ReactDOM from 'react-dom/client';
import {Provider, useDispatch, useSelector} from "react-redux";
import {createStore} from "redux";

const reducer = (state = {
    name: '孙悟空',
    age: 18,
    gender: '男',
    address: '花果山'
}, action) => {
    switch (action.type) {
        case 'SET_NAME':
            return {
                ...state,
                name: action.payload
            };
        case 'SET_AGE':
            return {
                ...state,
                age: action.payload
            };
        case 'SET_ADDRESS':
            return {
                ...state,
                address: action.payload
            };
        case 'SET_GENDER':
            return {
                ...state,
                gender: action.payload
            };
        default :
            return state
    }

};

const store = createStore(reducer);

const App = () =>{
    const stu = useSelector(state => state);
    const dispatch = useDispatch();
    return  <div>
        <p>
            {stu.name} -- {stu.age} -- {stu.gender} -- {stu.address}
        </p>
        <div>
            <button onClick={()=>{dispatch({type:'SET_NAME', payload:'猪八戒'})}}>改name</button>
            <button onClick={()=>{dispatch({type:'SET_AGE', payload:28})}}>改age</button>
            <button onClick={()=>{dispatch({type:'SET_GENDER', payload:'女'})}}>改gender</button>
            <button onClick={()=>{dispatch({type:'SET_ADDRESS', payload:'高老庄'})}}>改address</button>
        </div>
  </div>
};



const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <div>
        <Provider store={store}>
            <App/>
        </Provider>
    </div>

);

复杂案例State

reducer：

const reducer = (state = {
    stu: {
        name: '孙悟空',
        age: 18,
        gender: '男',
        address: '花果山'
    },
    school: {
        name: '花果山一小',
        address: '花果山大街1号'
    }

}, action) => {
    switch (action.type) {
        case 'SET_NAME':
            return {
                ...state,
                stu: {
                    ...state.stu,
                    name: action.payload
                }
            };
        case 'SET_AGE':
            return {
                ...state,
                stu: {
                    ...state.stu,
                    age: action.payload
                }
            };
        case 'SET_ADDRESS':
            return {
                ...state,
                stu: {
                    ...state.stu,
                    address: action.payload
                }
            };
        case 'SET_GENDER':
            return {
                ...state,
                stu: {
                    ...state.stu,
                    gender: action.payload
                }
            };
        case 'SET_SCHOOL_NAME':
            return {
                ...state,
                school: {
                    ...state.school,
                    name:action.payload
                }
            };
        case 'SET_SCHOOL_ADDRESS':
            return {
                ...state,
                school: {
                    ...state.school,
                    address: action.payload
                }
            }
        default :
            return state;
    }

};

数据层次变多了，我们在操作数据时也变得复杂了，比如：

case 'SET_NAME':
    return {
         ...state,
        stu: {
            ...state.stu,
            name: action.payload
    }
};

同时数据加载的逻辑也要修改，之前我们是将整个state返回，现在我们需要根据不同情况获取state，比如获取学生信息要这么写：

//获取学生信息
const stu = useSelector(state => state.stu);
//获取学校信息：
const school = useSelector(state => state.school);

多个Reducer

Redux中是允许我们创建多个reducer的，所以上例中的reducer我们可以根据它的数据和功能进行拆分，拆分为两个reducer，像是这样：

const stuReducer = (state = {
    name: '孙悟空',
    age: 18,
    gender: '男',
    address: '花果山'
}, action) => {
    switch (action.type) {
        case 'SET_NAME':
            return {
                ...state,
                name: action.payload
            };
        case 'SET_AGE':
            return {
                ...state,
                age: action.payload
            };
        case 'SET_ADDRESS':
            return {
                ...state,
                address: action.payload
            };
        case 'SET_GENDER':
            return {
                ...state,
                gender: action.payload
            };
        default :
            return state;
    }

};

const schoolReducer = (state = {
    name: '花果山一小',
    address: '花果山大街1号'
}, action) => {
    switch (action.type) {
        case 'SET_SCHOOL_NAME':
            return {
                ...state,
                name: action.payload
            };
        case 'SET_SCHOOL_ADDRESS':
            return {
                ...state,
                address: action.payload
            };
        default :
            return state;
    }

};

修改后reducer被拆分为了stuReducer和schoolReducer，拆分后在编写每个reducer时，只需要考虑当前的state数据，不再需要对无关的数据进行复制等操作，简化了reducer的编写。于此同时将不同的功能编写到了不同的reducer中，降低了代码间的耦合，方便对代码进行维护。

合并：

拆分后，还需要使用Redux为我们提供的函数combineReducer将多个reducer进行合并，合并后才能传递进createStore来创建store。

const reducer = combineReducers({
    stu:stuReducer,
    school:schoolReducer
});

const store = createStore(reducer);

combineReducer需要一个对象作为参数，对象的属性名可以根据需要指定，比如我们有两种数据stu和school，属性名就命名为stu和school，stu指向stuReducer，school指向schoolReducer。读取数据时，直接通过state.stu读取学生数据，通过state.school读取学校数据。

完整案例：

import ReactDOM from 'react-dom/client';
import {Provider, useDispatch, useSelector} from "react-redux";
import {combineReducers, createStore} from "redux";

const stuReducer = (state = {
    name: '孙悟空',
    age: 18,
    gender: '男',
    address: '花果山'
}, action) => {
    switch (action.type) {
        case 'SET_NAME':
            return {
                ...state,
                name: action.payload
            };
        case 'SET_AGE':
            return {
                ...state,
                age: action.payload
            };
        case 'SET_ADDRESS':
            return {
                ...state,
                address: action.payload
            };
        case 'SET_GENDER':
            return {
                ...state,
                gender: action.payload
            };
        default :
            return state;
    }

};

const schoolReducer = (state = {

    name: '花果山一小',
    address: '花果山大街1号'

}, action) => {
    switch (action.type) {
        case 'SET_SCHOOL_NAME':
            return {
                ...state,
                name: action.payload
            };
        case 'SET_SCHOOL_ADDRESS':
            return {
                ...state,
                address: action.payload
            };
        default :
            return state;
    }

};

const reducer = combineReducers({
    stu:stuReducer,
    school:schoolReducer
});

const store = createStore(reducer);

const App = () => {
    const stu = useSelector(state => state.stu);
    const school = useSelector(state => state.school);
    const dispatch = useDispatch();
    return <div>
        <p>
            {stu.name} -- {stu.age} -- {stu.gender} -- {stu.address}
        </p>
        <div>
            <button onClick={() => {
                dispatch({type: 'SET_NAME', payload: '猪八戒'});
            }}>改name
            </button>
            <button onClick={() => {
                dispatch({type: 'SET_AGE', payload: 28});
            }}>改age
            </button>
            <button onClick={() => {
                dispatch({type: 'SET_GENDER', payload: '女'});
            }}>改gender
            </button>
            <button onClick={() => {
                dispatch({type: 'SET_ADDRESS', payload: '高老庄'});
            }}>改address
            </button>
        </div>

        <hr/>

        <p>
            {school.name} -- {school.address}
        </p>
        <div>
            <button onClick={() => {
                dispatch({type: 'SET_SCHOOL_NAME', payload: '高老庄小学'});
            }}>改学校name
            </button>
            <button onClick={() => {
                dispatch({type: 'SET_SCHOOL_ADDRESS', payload: '高老庄中心大街15号'});
            }}>改学校address
            </button>
        </div>
    </div>;
};


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <div>
        <Provider store={store}>
            <App/>
        </Provider>
    </div>
);
Tone@
关注
专栏目录
react-redux的使用从action规划到reducer实现及完整案例
Marswill
10-18 6245
网络中介绍redux和react-redux的文章非常非常多我为什么要写这篇文章呢？因为他们都写得不好。好与不好的标准就是对于一个需要学习react redux的人能不能在读完文章后顺利理解和完成可运行案例。由于时间关系和演示项目对文件命名不是很合理，请谅解。 redux作为一个状态管理库其实是独立的。可以在angular，vue，react或者jQuery中使用。当然使用redux你需要遵循一...
Redux使用实例
望京十三兄的博客
09-08 225
<div id="counter"></div> <button id="addBtn">+</button> <button id="minusBtn">-</button> <script type="text/javascript"> function createStore(red...
使用redux简单例子
qq_36392571的博客
11-17 177
1、action.js 2、reducer.js 3、store.js 4、index.js 5、使用
108.《Redux的详细使用(案例)》
qq_44864082的博客
07-24 234
Redux是一个用来管理管理数据状态和UI状态的JavaScript应用工具。随着JavaScript单页应用（SPA）开发日趋复杂，JavaScript需要管理比任何时候都要多的state（状态），Redux就是降低管理难度的。（Redux支持React，Angular、jQuery甚至纯JavaScript） 按照下面的项目结构，创建项目，并把代码复制进去，就可以呈现出利用Redux管理数据的react案例 案例图片 当我们在文本框输入内容，点击确定就会进行追加 项目结构图解 所需安装的依赖 cn
Redux 知识点 及 使用案例
YuLong的博客
10-29 764
文章目录ReduxRedux简介 Redux Redux简介 redux是一个专门用于做状态管理的JS库(不是react插件库)。 它可以用在react,，angular， vue等项目中, 但基本与react配合使用。 作用：集中式管理react应用中多个组件共享的状态。 使用场景： 某个组件的状态，需要让其他组件可以随时拿到（共享）。 一个组件需要改变另一个组件的状态（通信）。 总体原则：能不用就不用, 如果不用比较吃力才考虑使用。 设计思想： Redux 是将整个应用状态存储到一个叫做 st
Redux基础介绍及案例
weixin_42499553的博客
06-17 727
一、Redux核心 1.Redux核心概念及工作流程 Store：存储状态的容器，JavaScript对象 View：视图，html界面 Actions：对象，描述对状态进行怎样的操作 Reducers：函数，操作状态并返回新的状态 工作流程：视图如果想改变store中的状态，他无法直接更改，他必须要先去触发action，actions会被reducer接受到，他根据actions中的type去进行判断看一下他要进行什么样的操作，reducer会根据type属性值对State中的状态进行操作
在react项目实战中使用Redux（案例讲解）
weixin_45745641的博客
04-05 2397
前言 上篇文章讲解了redux的基本使用方法，这篇文章通过小案例教大家如何在实际的react的项目中实现redux，加深对redux的理解和掌握，基础内容不清楚的可以看看上篇文章——》 Redux的基础用法详解（纯函数的概念） 项目中使用Redux 这里就新建项目然后使用redux完成一个小案例 首先新建项目然后删除掉冗余代码，之后在src文件夹下新建一个pages文件夹,在文件夹下新建一个alipay.js和wxpay.js,然后我们来实现一个这样的需求: 比如我们的微信和支付宝都绑定了同一张银行卡,当我
Redux使用--求和案例
weixin_42285795的博客
01-08 414
Redux使用 利用React Redux编写一个简单的求和案例
如何基于TS在React中使用Redux Toolkit
发果叁
11-15 1267
Redux Toolkit是Redux官方推荐的编写Redux逻辑的方法.它围绕 Redux 核心，并包含我们认为对于构建 Redux 应用必不可少的软件包和功能.Redux Toolkit简化了大多数 Redux 任务，防止了常见错误，并使编写 Redux 应用程序更加容易.为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
harmonyos2-react-demo:一步一步讲解react+webpack的配置；阮一峰React入门案例改造成使用ES6语法形式；R
07-01
一步一步讲解react+webpack的配置(demo01) 看了很多博客，大都是把配置文件一笔带过，或者干脆不给出配置文件，然而环境搭建对于新手来说是既困难又重要，显然网络上的博客不利于新手开始学习。 BZ打算从从头开始，...
redux的简单使用（例子演示）
TH226的专栏
10-13 3959
注意：以下每一步是按照redux由易到难的顺序逐步进行的，从初步使用到react与redux的组合使用以及解耦的顺序来的 安装redux npm install redux --save 1、redux的简单使用 1、新建store 2、获取状态 3、派发事件 下边代码简单的演示此过程 在src下新建index.js，在index中编写 import {createStore} from 'r...
redux 的简单实用案例
p1967914901的博客
07-19 285
redux 的简单实用案例整体思想与结构创建一个Action创建一个Reducer创建Store在App组件开始使用 整体思想与结构 文件目录如下： 构建 action，通过创建一个函数，然后返回一个对象，注意需 要携带 type 属性 构建 reducer，用来响应 action，然后通过 return 把数据传回 给 store 利用 createStore 来构建 store，构建的时候传递我们写好的 reducer 利用 store.subscribe() 注册监听 当我们利用store.dis
react-redux使用实例
lilei_ndsc的博客
08-08 1005
/** * redux使用 * 1.创建component页面 */ import React, { Component, PropTypes } from 'react'; import { Link,Router, Route } from 'react-router'; import { connect } from 'react-redux'; import * as act
redux+react-redux基本介绍+使用案例(一)
xiasohuai的博客
07-31 558
其实，redux和react并没有半毛钱的关系，redux甚至可以和jq一起用。 react-redux才是react的用于便捷操作redux的第三方插件。 1.创建项目 create-react-app redux-demo 2.安装redux npm install redux --S 3.安装react-redux npm install react-redux --S ...
用React-redux搭建的小案例分析
weixin_62094186的博客
04-07 384
React - redux 搭建的小项目分析
Redux——结合案例一步步深入学习，百度、阿里、滴滴、新浪的面试心经总结
最新发布
2401_83974590的博客
04-02 712
世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它**引入和用Provider包裹组件,添加store属性//这边通过store属性传下去,那么所有的Provider的后代组件都可以通过connect连接,然后获取redux的状态了利用connect()高阶组件,将redux的共享状态和方法可以通过属性访问得到并使用//函数式组件(无状态组件)自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
【React】react-redux 案例
qq_45677671的博客
05-13 1156
文章目录容器组件和UI组件改写计数器知识点总结 容器组件和UI组件 React-Redux 将所有组件分成两大类： UI 组件（presentational component） 容器组件（container component） UI组件 容器组件 作用 描述如何展现（骨架、样式） 描述如何运行（数据获取、状态更新） 直接使用Redux 否 是 数据来源 props 监听Redux state 数据修改 从props调用回调函数 向Redux派发actions
在react项目中使用redux
car_lic的博客
03-10 1699
该文章描述了如何在项目中使用redux
React学习计划-React16--redux使用与介绍
我愿化作繁星
12-27 2008
gitee。
中文详解：掌握Redux基础与高级技巧，从入门到实战
Redux中文教程全面覆盖了从入门到高级的主题，不仅提供理论讲解，还包含实战案例，是深入理解并运用Redux的强大参考资料。通过这个教程，开发者可以掌握如何构建高效、可维护的单页面应用状态管理架构。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值