二. redux 学习进阶---React + Redux

最新推荐文章于 2022-12-02 15:41:45 发布
最新推荐文章于 2022-12-02 15:41:45 发布
阅读量535 收藏 1
点赞数
分类专栏： React # S1.React数据流(Redux) 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35812380/article/details/122160758
版权

redux 学习进阶

文章目录

Redux解决了什么问题

二 React + Redux

2.1 在React 中不使用Redux 时遇到的问题

  1. 在React中组件通信的数据流是单向的,

  2. 顶层组件可以通过props属性向下层组件传递数据,

  3. 而下层组件不能向上层组件传递数据,

  4. 要想实现下层组件修改数据, 需要上层组件传递修改数据的方法到下层组件

  5. 当项目越来越大时候,组件之间传递数据变得越来越困难.

请添加图片描述

2.2 在React 中加入Redux 好处

使用Redux管理数据, 由于Store独立于组件, 使得数据管理独立于组件, 解决了组件与组件之间传递数据困难的问题.

请添加图片描述

在React 中使用 Redux

2.3 下载Redux

安装 redux , react-redux 这两个模块

$	npm install redux react-redux

2.4 Redux工作流程

  1. 组件通过dispatch方法触发Action
  2. Store 接收Action并将Action分发给Reducer
  3. Reducer 根据Action类型对状态进行更改并将更改后的状态返回给Store
  4. 组件订阅了Store中的状态, Store中的状态更新会同步到组件

请添加图片描述

nvm环境配置

配合博客安装:https://www.mintimate.cn/2021/07/26/nvmNode/

相关博文:

https://segmentfault.com/a/1190000040688010

NPM配置淘宝镜像
临时使用

npm install --registry https://registry.npm.taobao.org
 

全局使用

npm config set registry https://registry.npm.taobao.org
查看全局配置

npm config get registry
恢复全局配置

npm config set registry https://registry.npmjs.org
 

通过CNPM使用

npm install -g cnpm --registry=https://registry.npm.taobao.org

创建项目

$	npm install create-react-app -g
$   create-react-app react-redux-guide
$   cd react-redux-guide/
$   npm start

//项目目录
|____react-redux-guide
|____README.md
|____node_modules/
| |____package.json
|____.gitignore
|____public
| |____favicon.ico
| |____index.html
|____src
| |____App.js

| |____index.js

在浏览器中打开 http://localhost:3000/ ，即可显示

请添加图片描述

// src\App.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

import { createStore } from "redux";

const initialState = {
  count: 0,
};

function reducer(state = initialState, actions) {
  switch (actions.type) {
    case "increment": // 数值 + 1 ,返回一个新对象
      return {
        count: state.count + 1
      }

    case "decrement":
      return {
        count: state.count - 1
      }
    default:
      return state;
  }


}

const increment = { type: "increment" };
const decrement = { type: "decrement" };

const store = createStore(reducer);

function Counter() {
  return (
    <div>
      <button onClick={() => store.dispatch(increment)}>+</button>
      <span>{store.getState().count}</span>
      <button onClick={() => store.dispatch(decrement)}>-</button>
    </div>
  );
}

// 必须要订阅订阅数据更新,返回一个新的组件
store.subscribe(()=>{// 订阅数据返回新的数值
  ReactDOM.render(<Counter />, document.getElementById("root"));
})



// console.log("store", store.getState());

ReactDOM.render(<Counter />, document.getElementById("root"));

发现遇到一些问题,

  1. store部分代码写了两次, 如何分离store
  2. 分离后如何拿到store对象, 将是解决的问题

https://github.com/dL-hx/react-redux-guide

feat/1.0.0分支

Provider组件与connect方法

https://github.com/dL-hx/react-redux-guide

feat/1.1.0分支

2.5 connect方法两个参数

mapStateToProps，

mapDispatchToProps，

1.1 Provider组件与connect方法

为了使react 和 redux进行结合 ，需要通过 react-redux 模块实现连接

connect 作用
1. 帮助订阅store
2. 当store中状态发生变化，  会重新渲染组件

3. 获取store中的状态， 将状态映射到props属性中映射给组件
4. 获取dispatch方法， 触发action

connect方法两个参数意义
mapStateToProps，
mapDispatchToProps，

import React from "react";
import { connect } from "react-redux";
import {increment, decrement} from './../../index'

// function Counter(props) {
// 解构操作
function Counter({count, addCount, minusCount, dispatch}) {
  console.log(count);
  
  return (
    <div>
      {/* <button onClick={() => store.dispatch(increment)}>+</button> */}
      {/* <button onClick={() => dispatch(increment)}>+</button> */}
      {/* <button onClick={() => addCount()}>+</button> */}
      <button onClick={addCount}>+</button>
      {/* <span>{store.getState().count}</span> */}
      <span>{count}</span>
      {/* <button onClick={() => store.dispatch(decrement)}>-</button> */}
      {/* <button onClick={() => minusCount()}>-</button> */}
      <button onClick={minusCount}>-</button>
    </div>
  );
}


const mapStateToProps = (state)=>{
  return {
    // a:'b',
    count:state.count
  }
}



const mapDispatchToProps = (dispatch)=>{
  
  return {
    // addCount:function (data) {
    //   dispatch(increment)
    // },

    // 简化后如下
    addCount(data) {
      dispatch(increment)
    },

    minusCount(data) {
      dispatch(decrement)
    },


    dispatch
  }
}


export default connect(mapStateToProps,mapDispatchToProps )(Counter);

bindActionsCreators方法

2.6 bindActionsCreators方法

https://github.com/dL-hx/react-redux-guide

feat/1.2.0分支

目的： 调用方法生成函数， 优化如下代码

const mapDispatchToProps = (dispatch)=>{
  
  return {
    // addCount:function (data) {
    //   dispatch(increment)
    // },

    // 简化后如下
    addCount(data) {
      dispatch(increment)
    },

    minusCount(data) {
      dispatch(decrement)
    },


    dispatch
  }
}

优化后

import { bindActionCreators } from "redux";


const mapDispatchToProps = (dispatch) => ({
  // 用于生成函数
  ...bindActionCreators(
    {
      addCount() {
        return increment;
      },

      minusCount() {
        return decrement;
      },
    },
    dispatch
  ),
  
});

等价于

const mapDispatchToProps = (dispatch) => ({
  // 用于生成函数
  ...bindActionCreators(
    {
      addCount() {
        return {type:'increment'};
      },

      minusCount() {
        return {type:'decrement'};
      },
    },
    dispatch
  ),
});

import * as counterActions  from './../../store/actions/counter.actions'


const mapDispatchToProps = (dispatch) => ({
  // 用于生成函数
  ...bindActionCreators(counterActions, dispatch),
});

一个action简化如下

const mapDispatchToProps = (dispatch) =>
(bindActionCreators(counterActions, dispatch));

2.7 代码重构

https://github.com/dL-hx/react-redux-guide

feat/1.3.0分支

App.js

import React from "react";
import ReactDOM from "react-dom";
// import App from "./App";
import Counter from "./components/Counter";

import {store} from "./store";

// import { createStore } from "redux";
import { Provider } from "react-redux";

/* 
react-redux 
  Provider: 将store放到全局中，  组件都能拿到的地方
  connect
*/


ReactDOM.render(
  // 通过Provider 组件， 将store 放到了全局组件可以够得到的地方
  <Provider store={store}>
    <Counter />
  </Provider>,
  document.getElementById("root")
);

1.将reducer函数， 创建store代码放到store代码中

store

import { createStore } from "redux";
import reducer from './reducers/counter.reducer'

export const store = createStore(reducer);

const

const/counter.const.js

export const INCREMENT= "increment"
export const DECREMENT= "decrement"

reducers

reducers/counter.reducer.js

import { INCREMENT ,DECREMENT } from "../const/counter.const";

const initialState = {
    count: 0,
  };

function reducer(state = initialState, actions) {
      switch (actions.type) {
        case INCREMENT: // 数值 + 1 ,返回一个新对象
          return {
            count: state.count + 1,
          };
    
        case DECREMENT:
          return {
            count: state.count - 1,
          };
        default:
          return state;
      }
}

export default reducer

actions

actions/counter.action.js

export const INCREMENT= "increment"
export const DECREMENT= "decrement"
  1. 将action类型代码拆分为常量，防止写错
    INCREMENT, DECREMENT

Action传递参数

2.8 Redux使用步骤

为action传递参数

1. 传递参数

点击按钮时候数值 + 5

<button onClick={()=>addCount(5)}> + 1</button>
2.接收参数, 传递reducer
export const addCount = payload =>({type:INCREMENT, payload });
3. reducer根据接收到的数据进行处理
export default (state, actions)=>{
    switch(actions.type){
        case INCREMENT:
           // 返回一个新的对象给 store
            return {count: state.count + actions.payload }
    }
}

https://github.com/dL-hx/react-redux-guide

feat/1.4.0分支

Redux弹出框

https://github.com/dL-hx/react-redux-guide

feat/1.5.0分支

reducers/counter.reducer.js

import { INCREMENT, DECREMENT } from "../const/counter.const";
import { SHOW_MODAL, HIDE_MODAL } from "../const/modal.const";

const initialState = {
  count: 0,
  show: false,
};

function reducer(state = initialState, actions) {
  switch (actions.type) {
    case INCREMENT: // 数值 + 1 ,返回一个新对象
      return {
        ...state,
        // count: state.count + 1,
        count: state.count + actions.payload,
      };

    case DECREMENT:
      return {
        ...state,
        // count: state.count - 1,
        count: state.count - actions.payload,
      };

    // 这里需要保存原有的state,进行拷贝
    case SHOW_MODAL:
      return {
        ...state,
        show: true,
      };

    case HIDE_MODAL:
      return {
        ...state,
        show: false,
      };
    default:
      return state;
  }
}

export default reducer;

modal.actions.js

import { SHOW_MODAL, HIDE_MODAL } from "../const/modal.const";

export const show = () => ({ type: SHOW_MODAL });
export const hide = () => ({ type: HIDE_MODAL });

components/Modal/index.js

import React from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as modalActions from "./../../store/actions/modal.actions";

function Modal(props) {
  
  const styles = {
    width: 200,
    height: 200,
    position: "absolute",
    left: "50%",
    top: "50%",
    // marginLeft 等于,负的 自己盒子W的一半
    // -200/2 = -100
    marginLeft: -100,
    // marginTop 等于,负的 自己盒子H的一半
    // -200/2 = -100
    marginTop: -100,
    backgroundColor: "skyblue",
    display: props.vist ? "block" : "none",
  };

  return (
    <div>
      <button onClick={()=>props.show()}>显示</button>
      <button onClick={()=>props.hide()}>隐藏</button>
      {/*  {
             props.show&&<div style={styles}></div>
        } */}
      <div style={styles}></div>
    </div>
  );
}

// export default Modal;
const mapStateToProps = (state) => {
  return {
    vist: state.show,
  };
};

const mapDispatchToProps=(dispatch)=>{
    return bindActionCreators(modalActions, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(Modal);

拆分Reducer

https://github.com/dL-hx/react-redux-guide

feat/1.6.0分支

既匹配了counter的reducer,又匹配了modal的reducer,看如何拆分reducer,又能将其进行组合

1. 拆分reducer

counter.reducer.js

modal.reducer.js

2. 合并reducer

combineReducers

 import { combineReducers } from 'redux'

reducers/root.reducer.js

// root reducer 用来reducer的合并
 import { combineReducers } from 'redux'

//  1. 拆分reducer
 import CounterReducer from './counter.reducer'
 import ModalReducer from './modal.reducer'

 // 2. 合并reducer
 // {counter:{count:0}, model:{show:false}}
export default combineReducers({
    counter: CounterReducer,
    modal: ModalReducer,
})

\src\store\index.js

import { createStore } from "redux";
// import reducer from './reducers/counter.reducer'
// 改为合并后的reducers
import RootReducer from './reducers/root.reducer'

export const store = createStore(RootReducer);

调用时候修改如下

const mapStateToProps = (state) => {
  return {
    vist: state.modal.show,
  };
};

const mapStateToProps = (state) => {
  return {
    // a:'b',
    count: state.counter.count,
  };
};

上一篇:
一. redux 学习进阶—Redux核心
下一篇
三. redux 学习进阶—Redux 中间件

小李科技
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
react移动端项目构建，react@18.2.0+react-vant+vite+axios+redux+sass
03-06
该架构已解决大部分坑，主要用于react@18.2.0移动端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、vant、sass、vite、sass、react V18，其中还会介绍到如何跨页面传递数据、...
ts-redux-toolkit:TypeScript的PoC + react-redux + redux-toolkit + React Hooks + react-router
04-04
ts-react-redux-toolkit TypeScript的PoC + react-redux + redux-toolkit + React Hooks + react-router 还原 执照 新的BSD许可证
三. redux 学习进阶---Redux 中间件
小李科技
12-29 447
学习Redux 中间件, 及其原理
通过一个案例学习Redux+React-Redux+Redux-Thunk在React项目中的基本使用
mengxianglong123的博客
01-04 846
一、需求描述及分析 在一个页面中有三个组件，分别为Header、List以及AddForm，它们是兄弟组件，要求： Header组件中有两个按钮（一个同步一个异步）可以打开AddForm（默认AddForm隐藏不显示） AddForm有一个按钮可以关闭自身 AddForm中有输入框，可以添加数据到List组件 List可以显示数据 需求中的数据流如下图所示： 二、案例实操 1. 安装依赖 安装redux（核心库） npm install redux 安装react-redux（用于实现Reac
四. redux 学习进阶---Redux常用中间件
小李科技
12-29 543
Redux常用中间件
redux与react-redux简述
路漫漫其修远兮~
10-24 815
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分
react+ts+redux+react-router-dom+less+反向代理+antd
最新发布
weixin_47821983的博客
12-02 3857
1、下载、安装 yarn（npm已经挂掉）yarn 的官网（yarn,npm,cnpm 都属于包管理）// 全局安装 yarn 使用 cnpm i yarn -g// 可以使用 yarn -v // 查看下载是否成功// 下载依赖 yarn// 单个下载依赖 yarn add axios -S2、设置yarn 的下载源3、 安装 react的脚手架(搭建整个react项目)验证 create-react-app 是否安装成功4、创建react 项目。
一. redux 学习进阶---Redux核心
小李科技
12-24 738
分享redux核心进阶概念
react+redux+react-router项目搭建
秦璐璐的博客帝国
07-17 1510
reducer文件  统一管理 store.js 某一个模块的state //登入成功 export const LOG_SUCCESS = 'LOG_SUCCESS' //正在登录 export const LOG_ING = 'LOG_ING' //注销登录 export const LOG_OUT = 'LOG_OUT' //主要是统一保存状态对应的名称 /* *action方法 ...
Redux + React-Redux + Redux-Thunk 在 React 实际项目开发中使用详解
junkaione的博客
01-25 671
React 是我们的视图框架，但在大型项目开发的时候需要公用的数据状态是很难管理的，有明显父子关系的组件还比较方便传递值，但没关系的组件传值是非常麻烦的，这时候就需要用到我们的状态管理库 Redux，该文章会讲解在实际React项目开发中redux + react-redux + redux-thunk 组合应用，这也是我们现在企业项目开发中最常用的搭配，让你能够快速应用起来！
五. redux 学习进阶---Redux shopping实战案例
小李科技
12-31 581
redux shopping 实战综合案例
使用React+Redux+React-router构建可扩展的前端应用
02-01
React及其相关技术，来进行实际前端项目的开发。因为主要介绍如何将技术用于实践，所以希望读者已经对相关概念已经有一定的了解。 本文最初来源于笔者在StuQ的一次同名课程直播，现在加以整理成文，希望能对更多的人...
CpDesign:TypeScript + React-hooks + react-redux + axios + AntDesignMobile + react-intl国际化
05-11
项目目录|-- CPDESIGN|-- README.md|-- package.json|-- tsconfig.json|-- yarn.lock|-- config| |-- env.js| |-- modules.js| |-- paths.js| |-- pnpTs.js| |-- webpack.config.js| |-- webpackDevServer.config.js...
react-shop:一个学习React + Redux + React-Router的项目
04-29
React Shop（） 一个用于学习React + Redux + React-Router的项目。 如果您喜欢这个项目，请给我加注星标，谢谢！现场演示：克隆并运行服务： ： 构建设置# install dependenciesnpm install# run server at ...
React经典入门代码
小李科技
10-15 4482
React经典入门代码 import ReactDOM ,{c} from 'react-dom'; //{c}是属性, 相当于xxx.c const { name, age } = props; //ES6 //解构是对象的选择赋值 理解:export 第一个 import React from 'react'; import ReactDOM from 'react-dom'...
前端教程文档汇总
小李科技
10-26 1038
目录 一. 编程工具 二. 从这开始前端开始入门 2.0程序搜索:百度,谷歌,StackOverflow,Code Compare,codeproject codeproject:https://www.codeproject.com/ 2.1 ES6文档: 2.2React文档: 2.3 Redux(作为React状态管理的进阶版) 2.4 Ant Design框架学习 2.........
React快速开发迷你记账簿 (代码及使用)
小李科技
10-30 589
完整项目代码 https://github.com/lenvo222/10_finish.git day 01 简介 (这里是项目的简介,没有代码) day 04 使用jquery或axios请求api https://github.com/lenvo222/04_User_jquery_axios.git   day 05 静态类型的检查和改造 https://gi...
React(图解)-------------------基础常用的代码段
小李科技
11-09 469
参考网址:https://blog.csdn.net/tengxy_cloud/article/details/52909361 
使用React+Redux构建的手机端微信聊天室
项目采用的技术包括React、React-DOM、Redux、React-Redux用于状态管理，React-Router-DOM处理页面路由，wcPop作为弹窗插件，Webpack 2.0进行打包，Node.js和cnpm进行环境配置，以及react-photoswipe用于图片预览和...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小李科技

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

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

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

打赏作者

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

抵扣说明：

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

余额充值