react_06-react_redux相关

最新推荐文章于 2023-11-19 09:03:15 发布
最新推荐文章于 2023-11-19 09:03:15 发布
阅读量168 收藏
点赞数 1
分类专栏： React 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aoshisen/article/details/108880828
版权

redux

安装 Redux

npm i redux
yarn add redux

核心概念

理解 Redux 核心几个概念与它们之间的关系

  • state 状态
  • reducer 纯函数
  • store 仓库
  • action 动作
state 对象

通常我们会把应用中的数据存储到一个对象树（Object Tree） 中进行统一管理，我们把这个对象树称为：state

state 是只读的

这里需要注意的是，为了保证数据状态的可维护和测试，不推荐直接修改 state 中的原数据

通过纯函数修改 state

什么是纯函数？

纯函数
  1. 相同的输入永远返回相同的输出
  2. 不修改函数的输入值
  3. 不依赖外部环境状态
  4. 无任何副作用

使用纯函数的好处

  1. 便于测试
  2. 有利重构
action 对象

我们对 state 的修改是通过 reducer 纯函数来进行的，同时通过传入的 action 来执行具体的操作，action 是一个对象

  • type 属性 : 表示要进行操作的动作类型，增删改查……
  • payload属性 : 操作 state 的同时传入的数据

但是这里需要注意的是，我们不直接去调用 Reducer 函数，而是通过 Store 对象提供的 dispatch 方法来调用

Store 对象

为了对 state，Reducer，action 进行统一管理和维护，我们需要创建一个 Store 对象

redux 三大原则

  • 单一数据源: 整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中
  • State 是只读的: 唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象
  • 使用纯函数来执行修改

redux API

  • createStore(reducer, [preloadedState], enhancer);
    • reducer (Function): 接收两个参数，分别是当前的 state 树和要处理的 action，返回新的 state 树。
    • [preloadedState] (any): 初始时的 state。 在同构应用中，你可以决定是否把服务端传来的 state 后传给它，或者从之前保存的用户会话中恢复一个传给它。如果你使用 combineReducers 创建 - reducer，它必须是一个普通对象，与传入的 keys 保持同样的结构。否则，你可以自由传入任何 reducer 可理解的内容。
    • enhancer (Function): Store enhancer 是一个组合 store creator 的高阶函数，返回一个新的强化过的 store creator。这与 middleware 相似，它也允许你通过复合函数改变 store 接口。
    • 返回值 (Store): 保存了应用所有 state 的对象。改变 state 的惟一方法是 dispatch action。你也可以 subscribe 监听 state 的变化，然后更新 UI。
  • reducer
    • reducer(state,action)
import {createStore} from "redux";

/*
  store 仓库
    用来管理 state
    dispatch：调用 dispatch 方法，可以向 store 发起 action，store 会调用 reducer，将 action 传递给 reducer
    getState：获取 store 中存储的 state
    subscribe：用于监听 state 变化，或取消监听

  reducer 用于创建和修改state
    纯函数：
      1. 相同的输入永远返回相同的输出
      2. 不修改函数的输入值
      3. 不依赖外部环境状态
      4. 无任何副作用

  action 修改动作
    action 本质就是一个对象，该对象必须有 type 属性，type 属性中，描述的是我们要对 state 做出哪种修改，reducer中会接接收到 action 然后，完成对state的修改

  state 状态

 


*/
// 纯函数
function reducer(state={
  count: 1
},action){
  switch(action.type){
      case "ADD":
        state.count++;
        return {...state};//返回修改后的新的state
      case "MINUS":
        state.count--;
        return {...state};
  }
  return state;
}
const store = createStore(reducer);

window.onload = function(){
  let addBtn = document.createElement("button");
  addBtn.innerHTML = "++";
  addBtn.onclick=()=>{
    store.dispatch({
      type:"ADD"
    })
  };
  document.body.appendChild(addBtn); 
  let p = document.createElement("p");
  render();
  document.body.appendChild(p); 
  let minusBtn = document.createElement("button");
  minusBtn.innerHTML = "--";
  minusBtn.onclick=()=>{
    store.dispatch({
      type:"MINUS"
    })
  };
  document.body.appendChild(minusBtn); 
  store.subscribe(render);
  function render(){
    p.innerHTML = store.getState().count;
  }

};
  • Store
    • getState()
    • dispatch(action)
    • subscribe(listener)
    • replaceReducer(nextReducer)
import {createStore} from "redux";
function reducer(state={
  count: 1
},action){
  switch(action.type){
      case "ADD":
        state.count++;
        return {...state};//返回修改后的新的state
      case "MINUS":
        state.count--;
        return {...state};
  }
  return state;
}
const store = createStore(reducer);

window.onload = function(){
  let addBtn = document.createElement("button");
  addBtn.innerHTML = "++";
  addBtn.onclick=()=>{
    store.dispatch({
      type:"ADD"
    })
  };
  document.body.appendChild(addBtn); 
  let p = document.createElement("p");
  render();
  document.body.appendChild(p); 
  let minusBtn = document.createElement("button");
  minusBtn.innerHTML = "--";
  minusBtn.onclick=()=>{
    store.dispatch({
      type:"MINUS"
    });
    console.log(store.getState());
  };
  document.body.appendChild(minusBtn); 
  let unsubscribe = store.subscribe(render);
    //取消监听数据变化而重新渲染视图
  setTimeout(()=>{
    unsubscribe();
  },2000);
  function render(){
    p.innerHTML = store.getState().count;
  }
};
  • combineReducers(reducers)
    将 reducer 函数拆分成多个单独的函数，拆分后的每个函数负责独立管理 state 的一部分
const store = createStore(
    combineReducers({reducer})
);
  • applyMiddleware(…middlewares) 中间件
import axios from "axios";
function getListData(type) {
    //因为这不是一个自定义Hooks所以不能使用useDispatch()所以只能使用
    // const store = createStore(reducer,applyMiddleware(thunk));来达到在普通函数中使用diapatch来操作数据
    return (dispatch)=>{
        dispatch({
            type: "LOADING"
        });
        axios.get(`https://cnodejs.org/api/v1/topics?page=1&tab=${type}&limit=10`)
            .then(res => {
                dispatch({
                    type: "LOAD",
                    data: res.data.data
                })
            }, () => {
                dispatch({
                    type: "LOAD",
                    data: []
                })
            })
    }
    
}

export {getListData};

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

react-redux

react项目中的 redux 绑定库

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from "react-redux";
import store from "./store/index";
import App from './app';
ReactDOM.render(
 <Provider store={store}>
    <App />,
 </Provider>,
 document.getElementById('root')
);
  • connect() – 高阶函数:传入数据，返回一个函数
import React, { Component } from 'react';
import "./index.css";
import AddMessage from './addMessage';
import MessageList from './messageList';
import { connect } from 'react-redux';
function App(props){
    //let {data} = props;
    console.log(props);
    let {data} = props;
    return <section className="wrap">
        <h2 className="title">留言板</h2>
        <AddMessage />
        {data.length>0?<MessageList 
            data={data}
        />:""}
    </section>;
}
/*
    let cb= connect((state)=>{...state})  

    state => 返回值
        注意返回值必须是一个对象

    let newComponent = cb(component);

    通过 connect 可以 让组件获取到 state 和 dispatch

*/
App = connect(state=>state)(App)

export default App;
  • useDispatch 获取 dispatch
  • useStore 获取 store
  • useSelector 获取 state
import React, { Component } from 'react';
import "./index.css";
import AddMessage from './addMessage';
import MessageList from './messageList';
import { useSelector, useDispatch, useStore } from 'react-redux';
/*
    react-redux 的 hooks
        useSelector 用户获取 state
            useSelector(state=>我们需要的state的相关数据);
        useDispatch 获取 dispatch方法 

        useStore 获取 store

*/
function App(){
    let data = useSelector(state=>state);
    let dispatch = useDispatch();
    let store = useStore();
    console.log(data,dispatch,store);
    return <section className="wrap">
        <h2 className="title">留言板</h2>
        <AddMessage />
        {data.length>0?<MessageList 
            data={data}
        />:""}
    </section>;
}

export default App;
import React, { Component } from 'react';
import "./index.css";
import AddMessage from './addMessage';
import MessageList from './messageList';
import { useSelector, useDispatch, useStore } from 'react-redux';
/*
    react-redux 的 hooks
        useSelector 用户获取 state
            useSelector(state=>我们需要的state的相关数据);
        useDispatch 获取 dispatch方法 

        useStore 获取 store

*/
function App(){
    let data = useSelector(state=>state);
    let dispatch = useDispatch();
    let store = useStore();
    console.log(data,dispatch,store);
    return <section className="wrap">
        <h2 className="title">留言板</h2>
        <AddMessage />
        {data.length>0?<MessageList 
            data={data}
        />:""}
    </section>;
}

export default App;

中间件

更新的过程中，去做一些其他的事情，
dispatch —> reducer 更新state
dispatch --> 中间件 --> reducer

异步操作中间件

  • redux-thunk
    • 参数是对象，直接调用 reducer 修改我们的 state
    • 参数是函数，调用该函数，并且把 dispatch 和 getState 传递我们的函数，可以在函数中，进行异步操作

异步请求数据

  1. 利用thunk中间件，在函数中完成相应的逻辑并在组件中调用函数返回一个对象（相当于一个高阶的action）在dispatch函数中调用
  • 函数中的逻辑
import axios from "axios";
function getListData(type) {
    //因为这不是一个自定义Hooks所以不能使用useDispatch()所以只能使用
    // const store = createStore(reducer,applyMiddleware(thunk));来达到在普通函数中使用diapatch来操作数据
    return (dispatch)=>{
        dispatch({
            type: "LOADING"
        });
        axios.get(`https://cnodejs.org/api/v1/topics?page=1&tab=${type}&limit=10`)
            .then(res => {
                dispatch({
                    type: "LOAD",
                    data: res.data.data
                })
            }, () => {
                dispatch({
                    type: "LOAD",
                    data: []
                })
            })
    }
    
}

export {getListData};
  • reducer里面的逻辑
import {createStore,applyMiddleware} from "redux";
import thunk from "redux-thunk";

function reducer(state={
    data: [],
    loading: false
},action){
    switch(action.type){
        case "LOADING": // 正在获取数据
            return {
                data:[],
                loading: true
            }
        case "LOAD"://数据获取完成有数据
            return {
                data:action.data,
                loading: false
            }
    }
    return state;
}
//添加一个中间件
const store = createStore(reducer,applyMiddleware(thunk));

export default store;
  • 调用组件里面的逻辑

import React, { Fragment, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import {getListData} from "./store/action";
function List() {
    let { type = "all" } = useParams();
    let { loading, data } = useSelector(state => state);
    let dispatch = useDispatch();
    useEffect(() => {
        dispatch(getListData(type));
    }, [type]);
    return (<Fragment>
        {loading ?
            "数据获取中……"
            :
            (
                data.length > 0 ? (
                    <ul className="list">
                        {data.map(item => (<li key={item.id}>{item.title}</li>))}
                    </ul>
                ) : "暂无数据"
            )}
    </Fragment>
    );
}

export default List;

2.在函数式组件中利用Hooks直接操作store

  • 在store中定义的仓库

//直接定义仓库就行了,不需要那么麻烦需要传递给高阶对的action函数参数
import {createStore} from "redux";

function reducer(state={
    data: [],
    loading: false
},action){
    switch(action.type){
        case "LOADING": // 正在获取数据
            return {
                data:[],
                loading: true
            }
        case "LOAD"://数据获取完成有数据
            return {
                data:action.data,
                loading: false
            }
    }
    return state;
}

const store = createStore(reducer);

export default store;
  • 在函数式组件中请求数据
import React, { Fragment, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import axios from "axios";
function List() {
    let {type = "all"} = useParams();
    let { loading, data } = useSelector(state => state);
    let dispatch = useDispatch();
    /*
      获取相关数据：
          1. 数据获取中 -- 显示数据获取中
          2. 获取数据完成进行展示 -- 根据数据展示视图
          3. 数据获取失败，或者没有数据的情况 -- 显示暂无数据
    */
   useEffect(()=>{
        dispatch({
            type:"LOADING"
        });
        axios.get(`https://cnodejs.org/api/v1/topics?page=1&tab=${type}&limit=10`)
            .then(res=>{
                dispatch({
                    type:"LOAD",
                    data: res.data.data
                }),
                dispatch({
                    type:"LOAD",
                    data:[]
                })
            }
   )},[type]);
    //console.log(data);
    return (<Fragment>
        {loading ?
            "数据获取中……"
            :
            (
                data.length > 0 ? (
                    <ul className="list">
                        {data.map(item=>(<li key={item.id}>{item.title}</li>))}
                    </ul>
                ) : "暂无数据"
            )}
    </Fragment>
    );
}

export default List;

或者把相关逻辑抽离出来定义成一个自定义Hooks

import {useDispatch} from "react-redux";
import axios from "axios";
function useListData(){
    let dispatch = useDispatch();
    return (type)=>{
        dispatch({
            type: "LOADING"
        });
        axios.get(`https://cnodejs.org/api/v1/topics?page=1&tab=${type}&limit=10`)
            .then(res => {
                dispatch({
                    type: "LOAD",
                    data: res.data.data
                })
            },()=>{
                dispatch({
                    type:"LOAD",
                    data:[]
                })
            })
    }
}
export {useListData};

在需要用的地方使用自定义Hooks就行了

import {useDispatch} from "react-redux";
import axios from "axios";
function useListData(){
    let dispatch = useDispatch();
    return (type)=>{
        dispatch({
            type: "LOADING"
        });
        axios.get(`https://cnodejs.org/api/v1/topics?page=1&tab=${type}&limit=10`)
            .then(res => {
                dispatch({
                    type: "LOAD",
                    data: res.data.data
                })
            },()=>{
                dispatch({
                    type:"LOAD",
                    data:[]
                })
            })
    }
}
export {useListData};
aoshisen
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react中dispatch_react-redux中mapDispatchToProps的几种方式
weixin_39665507的博客
12-24 844
react-redux中使用mapDispatchToProps的几种方式1：第一种形式const mapDispatchToProps = (dispatch) => {return {jia:() => {dispatch(increment())},jian:() => {dispatch(decrement())}}}export default connect(mapS...
Learning-Vanilla_Redux-React_Redux
03-13
"Vanilla Redux"是指不依赖任何框架或库的纯Redux实现，而"React Redux"则是Redux与React结合使用的官方库。本教程"Learning-Vanilla_Redux-React_Redux"旨在帮助开发者深入理解这两者的核心概念和工作原理。 首先...
Redux学习3 useSelector 与 useDispatch
qq_40600414的博客
12-15 1659
Redux学习3 useSelector 与 useDispatch 在 react-redux 中学习了使用connect方法对ui组件进行加强，从而使得组件可以通过mapStateToProps和mapDispatchToProps来进行将 redux中的state的数据 存进props来读取和修改redux的数据，但是如果每个组件都要去利用connect方法进行加强，会太麻烦，所以reacct-redux 新版本7.1推出了hooks风格的api，可以更加简单的去操作redux的数据。 u
前端面试八股文（详细版）—中
leo的博客
12-28 8501
本文将详细讲解 React 、git 、webpack等内容，预祝各位成功上岸！
【React】 redux-toolkit 和 react-redux
小秀的博客
11-19 612
单向数据流，view 发出 action，store 调用 reducer 计算出新的 state，若 state 产生变化，则调用监听函数重新渲染 view单一数据源，只有一个 Storestate 是只读的，每次状态更新之后只能返回一个新的 state没有 dispatcher，而是在 store 中集成了 dispatch 方法，store.dispatch() 是view 发出 action 的唯一途径支持使用中间件（Middleware）管理异步数据流。
React使用redux react-redux redux-thunk
lihaipi的博客
07-21 763
React redux [ˈriˌdʌks] 〇、预备 安装 npm install --save redux npm install --save react-redux(基础款用不上) npm install --save redux-thunk npm install --save-dev redux-devtools(不必要) 一、基础版 已经将reducer和actions抽出 1.仓库文件 // 1.创建仓库对象，解构必要的函数，并引入redux-thunk改装增强redux import {
28、react 使用 react-redux
大家好，我是+V
09-27 982
reac-redux 是一个 react 的插件库。作用是专门用来简化 react 应用中使用 redux。
react redux 简化_react-redux
weixin_39846089的博客
01-14 39
API文档：http://cn.redux.js.org/docs/react-redux/## 一、简单示例![](https://box.kancloud.cn/5d1b354bbabbcc0fe963417f80a7748c_88x36.gif)~~~import React, { Component } from 'react'import PropTypes from 'prop-typ...
redux与react-redux
北巷的博客
10-12 1147
redux与react-redux
【React】react-redux 案例
qq_45677671的博客
05-13 1065
文章目录容器组件和UI组件改写计数器知识点总结 容器组件和UI组件 React-Redux 将所有组件分成两大类： UI 组件（presentational component） 容器组件（container component） UI组件 容器组件 作用 描述如何展现（骨架、样式） 描述如何运行（数据获取、状态更新） 直接使用Redux 否 是 数据来源 props 监听Redux state 数据修改 从props调用回调函数 向Redux派发actions
redux react-redux redux-thunk redux-saga 区别
LiYangCSDN的博客
10-03 141
通过使用saga，我们可以将异步逻辑以更直观和可测试的方式处理，并使用一套称为"effects"的特殊函数来描述这些操作。总而言之，Redux是一个状态管理库，React-Redux是将Redux与React组件结合使用的库，而Redux-thunk和Redux-saga是Redux的中间件，用于处理异步操作。是Redux的官方绑定库，它提供了一种将Redux状态与React组件结合使用的方式。它充当一个桥梁，将Redux的状态与React组件中的属性和方法连接起来，使得组件可以访问和操作Redux状态。
仿小米有品React_React-redux_React-Router_Hooks.zip
11-01
"仿小米有品React_React-redux_React-Router_Hooks.zip"这个项目，显然是一个基于React的实战项目，旨在模仿小米有品的电商平台，同时集成了React-redux、React-Router和React Hooks这三大关键组件，以实现更高效、...
react_redux-list-of-todos
03-11
【React + Redux TODO 列表应用详解】 在前端开发领域，React 和 Redux 是两个非常流行的库，它们分别用于构建用户界面和管理应用状态。在这个名为 "react_redux-list-of-todos" 的项目中，我们将深入探讨如何使用 ...
typescript-react-redux-ie8:Typescript-react-redux-ie8，在线演示
05-11
TypeScript-React-Redux (IE8+)本项目是一个兼容IE8的 TypeScript + React + Redux + immutablejs 的项目模板。为了降低上手难度，我在项目中写3个DEMO：todomvc without immutabeljs (ts + react + redux)[todo] ...
react_redux-list-of-posts
03-11
React + Redux帖子列表在中用您的Github用户名替换<your> 遵循描述使用Redux可以实现所有功能，包括过滤（带有反跳的（（*）））。 此外，在每个帖子旁边添加一个按钮，并添加评论以将其删除。
大学生创业计划书(30)-两份资料.doc
08-20
大学生创业计划书(30)-两份资料.doc
学习DXP编辑多个对像
08-20
DXP编辑多个对像
基于Matlab编程的直线检测实现[Matlab编程].zip
最新发布
08-20
MATLAB提供了多种直线检测技术，其中包括以下几种常用的方法： 1. Hough变换：Hough变换是一种基于极坐标空间的直线检测方法，通过将直线表示为参数空间中的点，将图像中的直线检测问题转化为参数空间中的点集聚类问题。MATLAB中的函数'hough'和'houghlines'可以实现Hough变换直线检测。 2. 边缘检测+RANSAC：先使用边缘检测方法（如Sobel、Canny等）提取图像中的边缘，然后使用RANSAC算法拟合直线模型。MATLAB中的函数'edge'可以进行边缘检测，而函数'fitline'可以使用RANSAC算法进行直线拟合。 3. 直线分段检测：将图像中的直线分段，在每个段上进行直线拟合。常见的方法包括分段最小二乘法、分段Hough变换等。MATLAB中的函数'fitline'可以对图像中的曲线进行分段直线拟合。 4. 基于模型的直线检测：根据直线的几何模型进行直线检测，常见的方法包括RANSAC算法、最小二乘法等。MATLAB中的函数'fitline'可以实现基于模型的直线检测。 以上是一些常用的MATLAB直线检测技术，具体的选择要根据实
网络防火墙：数字世界的守卫者
08-20
【计算机网络开发】通常指的是开发计算机网络相关的软件和系统，包括但不限于以下几个方面： 1. **网络协议开发**：设计和实现用于网络通信的协议，如TCP/IP、HTTP、FTP等。 2. **网络应用开发**：开发运行在网络上的应用程序，如网页浏览器、电子邮件客户端、文件共享应用等。 3. **网络服务开发**：创建和管理网络服务，例如Web服务、数据库服务、云服务等。 4. **网络安全**：开发用于保护网络安全的软件，包括防火墙、入侵检测系统、加密技术等。 5. **网络设备驱动程序开发**：为网络硬件设备编写驱动程序，如网卡、路由器、交换机等。 6. **网络管理工具**：开发用于网络监控、管理和故障排除的工具。 7. **嵌入式网络系统**：开发用于嵌入式设备（如智能家居设备、工业控制系统）的网络功能。 8. **网络编程语言和框架**：使用特定的编程语言和框架（如Python、Java、Node.js等）进行网络应用的开发。 9. **分布式系统开发**：设计和实现分布式计算系统，这些系统可以跨多个物理位置运行。 10. **网络性能优化**：优化网络应用和系统的性能，确保
react-native-redux-router
04-12
react-native-redux-router是一个用于在React Native应用中管理路由和状态的库。它结合了React Native、Redux和React Navigation，提供了一种方便的方式来处理应用程序的导航和状态管理。 下面是一个简单的示例，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值