redux使用

最新推荐文章于 2024-07-03 11:10:20 发布
最新推荐文章于 2024-07-03 11:10:20 发布
阅读量109 收藏
点赞数
文章标签： javascript reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45408578/article/details/116866980
版权

react-redux

关键步骤

  1. 安装依赖
  2. 创建store
  3. 创建reducer
  4. 将store数据映射到组件中
  5. 组件触发事件 创建action
  6. 将action派发到store
  7. store自己调用reducer

实现目标

  1. 可以发请求加载数据
  2. 点击 + - 组件 会修改数据

安装依赖

redux 是核心库 react-redux是负责将react组件连接redux

yarn add redux react-redux --dev

新建redux配套文件

在src/store/目录下新建 以下文件

  1. index.js store核心文件
  2. reducer/index.js 负责记录操作的reducer文件

reducer.js

// 1 定义默认数据，后期可以从接口中获取
const defaultState = {
  num: -1
};

// 2 创建和对外暴露一个函数 返回state
export default (state = defaultState, action) => {
  return state;
}

store/index.js

// 1 引入 store生成器
import { createStore } from "redux";
// 2 引入reducer
import reducer from "./reducer";
// 3 创建和对外暴露store
export default createStore(reducer);

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// 1 引入 react-redux  负责将store和组件连接起来
import { Provider } from "react-redux";
// 1 引入 store
import store from "./store";

// 2 将App用 Provider 标签包裹起来
// 2 将store通过属性的方式传递到App组件上
ReactDOM.render(<Provider store={store} ><App /></Provider>, document.getElementById('root'));

App.js

import React, { Component } from 'react';
// 1 引入 react-redux 中 链接 组件和store的对象 connect
import { connect } from "react-redux";

class App extends Component {
  render() {
    return (
      // 4 使用store中的数据 
      <div className="App">
        {this.props.num}
        <hr />
        <button> + </button>
        <button> - </button>
      </div>
    );
  }
}

// 2 将 store中的数据传递到 App的props上
const mapStateToProps = (state) => {
  return {
    num: state.num
  }
}


// 3 用 connect 将store中的数据通过props的方式传递到App上
export default connect(mapStateToProps, null)(App)
思考

以上代码，“action去了哪里了呢？ ”

答：没有操作数据的行为，当然么有action了

抽离组件，绑定事件

编辑App.js

将 两个按钮 抽离出来变成两个组件，这才满足组件共享数据的设计理念

// 加
class AddBtn extends Component {
  render() {
    return <button onClick={this.props.numAdd} >+</button>
  }
}
 
// 减
class SubstraBtn extends Component {
  render() {
    return <button onClick={this.props.numSubStra}>-</button>
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        {this.props.num}
        <hr />
        {/* 使用组件 传递props */}
        <AddBtn {...this.props}></AddBtn>
        {/* 使用组件 传递props*/}
        <SubstraBtn {...this.props}></SubstraBtn>
      </div>
    );
  }
}

此时，我们发现 两个组件上都绑定了点击事件

<button onClick={this.props.numAdd} >+</button>
<button onClick={this.props.numSubStra}>-</button>

所以，现在我们需要另外定义 两个事件，在redux中就叫做行为 action

和 mapStateToProps同层级，创建 行为合集 mapDispatchToProps，并且把它传入 connect的第二个参数内。

// 2 将行为action 链接到store和组件上
const mapDispatchToProps = (dispatch) => {
  return {
    // 点击事件中的加
    numAdd: () => {
      // 创建一个action，负责将行为类型和数据交给reducer
      const action = {
        // type是一个自定义的字符串
        type: "NUM_ADD",
        value: 1
      };
      // 派发行为- 会将action 派发到  reducer中
      dispatch(action);
    },
    // 点击事件中的减
    numSubStra: () => {
      const action = {
        type: "NUM_SUBSTRA",
        value: 1
      };
      dispatch(action);
     }
  }
}

// 3 用 connect 将store中的数据通过props的方式传递到App上
export default connect(mapStateToProps, mapDispatchToProps)(App)

编辑 reducer逻辑

// 1 定义默认数据，后期可以从接口中获取
const defaultState = {
  num: -1
};

// 2 创建和对外暴露一个函数 返回state
export default (state = defaultState, action) => {
  // 当 action被派发时(dispatch)，会触发
  if (action.type === "NUM_ADD") {
    // 复制一份旧的state
    let newState = Object.assign({}, state);
    newState.num += action.value;
    // 将新的state返回，即可触发store的更新
    return newState;
  }
  if (action.type === "NUM_SUBSTRA") {
    // 复制一份旧的state
    let newState = Object.assign({}, state);
    newState.num -= action.value;
    return newState;
  }

  return state;
}

优化手段

通过以上步骤，可以把redux的使用流程走完，但是在公司中，还会对以上的代码进行优化，存在以下优化的步骤

  1. 将state中的数据修改为对象形式，因为数据一般不会这么简单。
  2. 将action的type类型提取成常量的形式，避免手写字符串出错
  3. 将action的创建由字面量改为 action生成器来创建，方便后期代码的维护和测试
  4. 拆分和合并reducer，有时候，会根据不同的数据使用不同的reducer
  5. 添加异步action，因为有时候我们的数据是从异步中获取的不是同步的方式。
将state中的数据修改为对象形式

编辑 reducer/index.js

const defaultState = {
  // 修改为对象形式
  payload: {
    num: -1
  }
};

export default (state = defaultState, action) => {
  if (action.type === "NUM_ADD") {
    let newState = Object.assign({}, state);
    // 修改为对象形式
    newState.payload.num += action.value;
    return newState;
  }
  if (action.type === "NUM_SUBSTRA") {
    let newState = Object.assign({}, state);
    // 修改为对象形式
    newState.payload.num -= action.value;
    return newState;
  }

  return state;
}

修改App.js中使用的state的代码

const mapStateToProps = (state) => {
  return {
     {/* 修改为对象的形式 */}
    num: state.payload.num
  }
}
将action的type类型提取成常量的形式

新建文件 src/store/actionType/index.js

export const NUM_ADD = "NUM_ADD";
export const NUM_SUBSTRA = "NUM_SUBSTRA";

修改 使用到了 NUM_ADD的文件

编辑 src/store/reducer/index.js

// 1 导入 type常量
import { NUM_ADD, NUM_SUBSTRA } from "../actionType";

export default (state = defaultState, action) => {
  // 2 修改为常量的方式
  if (action.type === NUM_ADD) {
	......
  }

  return state;
}

编辑 src/App.js

// 1 导入 type 常量
import { NUM_ADD, NUM_SUBSTRA } from "./store/actionType";

const mapDispatchToProps = (dispatch) => {
  return {
    numAdd: () => {
      const action = {
        // 2  使用 type常量
        type: NUM_ADD,
        value: 1
      };
      dispatch(action);
    }
}
使用action生成器来创建action

新建文件 src/store/actionCreator/index.js

import {  NUM_ADD,NUM_SUBSTRA} from "../actionType";
export const numAdd = () => ({
  type: NUM_ADD,
  value: 1
})
export const numSubstra = () => ({
  type: NUM_SUBSTRA,
  value: 1
})

修改 App.js

// 1 导入action
import { numAdd, numSubstra } from "./store/actionCreator";

const mapDispatchToProps = (dispatch) => {
  return {
    numAdd: () => {
      // 2 修改为 生成器生成的action
      dispatch(numAdd());
    }
  }
}
拆分和合并reducer

当需要共享的数据足够多时，一般会拆分多个reducer方便管理

如 拆分成两个 reducer 一个是操作 nums的，一个是操作水果的。

  1. 编辑 actionType/index.js

    export const NUM_ADD = "NUM_ADD";
export const NUM_SUBSTRA = "NUM_SUBSTRA";
// 新增 增加 苹果action type
export const APPLE_NUM_ADD = "APPLE_NUM_ADD";
// 新增 减少 苹果action type
export const APPLE_NUM_SUBSTRA = "APPLE_NUM_SUBSTRA";

  2. 编辑 actionCreator/index.js

    // 新增 添加苹果 action 
export const appleNumAdd = () => ({
  type: APPLE_NUM_ADD,
  value: 1
})
// 新增 减少苹果 action
export const appleNumSubstra = () => ({
  type: APPLE_NUM_SUBSTRA,
  value: 1
})

  3. 新建文件 reducer/numReducer.js

    将 以前 reducer/index.js 全部复制过去即可

    import { NUM_ADD, NUM_SUBSTRA } from "../actionType";
const defaultState = {
  payload: {
    num: -1
  }
};
export default (state = defaultState, action) => {
  if (action.type === NUM_ADD) {
    let newState = Object.assign({}, state);
    newState.payload.num += action.value;
    return newState;
  }
  if (action.type === NUM_SUBSTRA) {
    let newState = Object.assign({}, state);
    newState.payload.num -= action.value;
    return newState;
  }
  return state;
}

  4. 新建文件 reducer/fruitReducer.js

    import { APPLE_NUM_ADD, APPLE_NUM_SUBSTRA } from "../actionType";
const defaultState = {
  payload: {
    appleNum: 110
  }
};
export default (state = defaultState, action) => {
  if (action.type === APPLE_NUM_ADD) {
    let newState = Object.assign({}, state);
    newState.payload.appleNum += action.value;
    return newState;
  }
  if (action.type === APPLE_NUM_SUBSTRA) {
    let newState = Object.assign({}, state);
    newState.payload.appleNum -= action.value;
    return newState;
  }
  return state;
}

  5. 编辑 reducer/index.js 用来合并 两个reducer fruitReducer 和 numReducer

    // 1 引入 合并reducer的对象
import { combineReducers } from "redux";
import fruitReducer from "./fruitReducer";
import numReducer from "./numReducer";
// 2 对象的形式传入 要合并的reducer
const rootReducer = combineReducers({ numReducer, fruitReducer });
export default rootReducer;

  6. 修改App.js

    import React, { Component } from 'react';
import { connect } from "react-redux";
// 1 多导入两个action appleNumAdd 和 appleNumSubstra
import { numAdd, numSubstra, appleNumAdd, appleNumSubstra } from "./store/actionCreator";
class AddNumBtn extends Component {
  render() {
    return <button onClick={this.props.numAdd} >+</button>
  }
}

class SubstraNumBtn extends Component {
  render() {
    return <button onClick={this.props.numSubStra}>-</button>
  }
}
// 2 新增的组件
class AddFruitBtn extends Component {
  render() {
    // 2.1 新绑定的事件
    return <button onClick={this.props.appleNumAdd} >+</button>
  }
}
// 2 新增的组件
class SubstraFruitBtn extends Component {
  render() {
    // 2.1 新绑定的事件
    return <button onClick={this.props.appleNumSubStra}>-</button>
  }
}

class App extends Component {
  render() {
    // 3 修改过的页面代码
    return (
      <div className="App">
      数量  {this.props.num}
        <hr />
        <AddNumBtn {...this.props}></AddNumBtn>
        <SubstraNumBtn {...this.props}></SubstraNumBtn>
        <hr />
      水果数量  {this.props.appleNum}
        <br />
        {/* 3.1 引入新组件 */}
        <AddFruitBtn {...this.props}></AddFruitBtn>
        {/* 3.1 引入新组件 */}
        <SubstraFruitBtn {...this.props}></SubstraFruitBtn>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  // 4 修改数据的获取方法
  return {
    num: state.numReducer.payload.num,
    appleNum: state.fruitReducer.payload.appleNum
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    numAdd: () => {
      dispatch(numAdd());
    },
    numSubStra: () => {
      dispatch(numSubstra());
    },
    // 5 新增的action
    appleNumAdd: () => {
      dispatch(appleNumAdd());
    },
    // 5 新增的action
    appleNumSubStra: () => {
      dispatch(appleNumSubstra());
    },
  }
}

// 3 用 connect 将store中的数据通过props的方式传递到App上
export default connect(mapStateToProps, mapDispatchToProps)(App)

  7. 最终结果

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Eh5NXZgd-1621092162174)(./medias/1560268076127.png)]

添加异步action redux-thunk

想象一下，我们对数据库进行查询，编辑和删除，其实都是异步操作。现在，让我们的应用支持异步action操作。

  1. 安装依赖 redux-thunk

    yarn add redux-thunk --dev

  2. 修改store/index.js

    // 1 引入 redux的中间件连接器
import { createStore, applyMiddleware } from "redux";
import reducer from "./reducer";
// 1 引入 redux-thunk
import reduxThunk from "redux-thunk";
// 2 使用中间件连接器将redux-thunk传入 store构造器
export default createStore(reducer, applyMiddleware(reduxThunk));

  3. 修改 actionCreator/index.js

    // 1 修改 减少苹果的action 为异步的形式
export const appleNumSubstra = () => {
   // 2 返回一个函数
  return (dispatch) => {
    // 3 开启异步  后期将 setTimeout 替换成异步的方式即可
    setTimeout(() => {
      const action = {
        type: APPLE_NUM_SUBSTRA,
        value: 1
      };
        // 4 开启派发
      dispatch(action);
    }, 2000);
  }
}

小结

当对redux流程熟悉后，使用流程应该是这个样子的

  1. 编写action生成器
  2. 编写reducer
  3. 编写store
  4. 连接store和组件
  5. 。。。

react 插件

vs code插件

  1. Simple React Snippets react的快捷代码段

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I68TNQJo-1621092162183)(./medias/1560268972967.png)]

chrome插件

  1. React Developer Tools

  2. Redux DevTools

Redux DevTools

  1. 没使用异步 react-thunk时，编辑文件 store/index.js

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

export default createStore(reducer,
  // 给谷歌调试工具使用的
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

  2. 使用了异步 react-thunk时，编辑文件 store/index.js

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

const composeEnhancers =
  typeof window === 'object' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
    }) : compose;

const enhancer = composeEnhancers(
  applyMiddleware(thunk),
);
const store = createStore(reducer, enhancer);
export default  store;
造糖主义
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
11.redux的简单使用
medusee的博客
10-20 192
文章目录redux 的使用1.安装redux2.创建store3.创建reducer4.获取redux的状态，并渲染到dom5. 更改redux的状态如下，想要进行新的数据的添加6.store的三个重要方法7.组件的优化（针对组件type写错了不会弹出错误的问题）reducer的总结redux的思路整理1. redux有三部分组成 **store、reducer、actionCreators**2. redux有三个重要的方法3. 基本流程：拆分reducer1. 将reducer.js 和 actionC
redux
qq_45271323的博客
04-17 193
redux相关API redux中包含: createStore(), applyMiddleware(), combineReducers() store对象: getState(), dispatch(), subscribe() react-redux: <Provider store={store}>: 向所有的容器组件提供store connect( state =...
Redux使用
ppxgf的博客
07-18 241
Redux使用
react函数式组件中使用react-redux
qq_39246667的博客
05-12 2920
一、背景 最近我最近在用react重构公司的项目，但是在使用redux时，我遇到了很多坑，经过多次查找资料,特此记录： 二、踩坑过程 因为我已经搭建了项目架构，所以这里只从react-redux的使用开始 1、安装插件 npm i redux react-redux -S 2、定义store仓库，action，reducer redux目录结构如下 我们先来看看index.js，定义全局 数据仓库 /redux/index.js import {legacy_createStore as crea
在Redux Toolkit中使用createSlice时，如何定义和使用复杂的PayloadAction类型？
最新发布
极客前端探索者的博客
07-03 543
首先，你需要确定你的动作（actions）携带的负载（payload）类型。例如，假设我们要为一个博客应用创建一个切片来管理文章，其中包括创建新文章的动作，这个动作的负载可能包含标题、内容和作者信息。// actions.ts 或 直接在slice文件中定义。
正确理解redux Toolkits中createSlice的action.payload
jiaohuizhuang6019的博客
09-23 581
正确理解redux Toolkits中createSlice的action.payload
redux学习
weixin_30629977的博客
11-11 46
redux学习： 1.应用只有一个store，用于保存整个应用的所有的状态数据信息，即state，一个state对应一个页面的所需信息 　　注意：他只负责保存state，接收action， 从store.dispatch(aciton)获得一个action， 然后要通过reducer整理，旧state和新action，计算出新的state 1.1 创建： store = Redux....
React , Redux 与 依赖注入
Xzzzzz的博客
12-24 2223
React , Redux 与 依赖注入最近在学习 TypeScript , 顿时有一种写 Java 代码的感觉. TypeScript 将 强类型 和 完整的面向对象概念, 赋予了JS.能够实现更加 OOP 的编写前端代码. 最近看到 TypeScript 的 注解 和 装饰器 两个概念. 有过面向对象的开发人员很多人都应该知道 IoC. 控制反转(IoC) 通过把创建对象的权利交给框架,
让Vue也可以使用Redux的方法
08-27
让 Vue 也可以使用 Redux 的方法是通过使用特定的插件来实现的。下面我们将详细介绍让 Vue 也可以使用 Redux 的方法。 什么是 Redux Redux 是一个状态管理工具，它提供了一个统一的状态管理解决方案。Redux 帮助...
mapbox-redux:使用Redux测试Mapbox
05-12
一个基本的示例，展示了如何在Redux中使用Mapbox。 $ git clone git@github.com:michogar/mapbox-redux.git $ cd mapbox-redux $ npm install $ npm run start 如何 本示例使用库。 那里有更多文档。 借助mapbox-...
redux:使用redux
05-22
与世博会合作开发的项目 :desktop_computer: :vibration_mode:管理应用程序状态对于正常运行至关重要使用Redux模拟电子商务购物车的项目安装在您的终端中，使用以下命令： git clone ...使用expo install或yarn install...
优雅的在React项目中使用Redux的方法
10-17
主要介绍了优雅的在React项目中使用Redux的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
redux中间件之redux-thunk的具体使用
12-02
要使用`redux-thunk`，首先需要从'redux-thunk'库导入它，然后在创建Store时通过`applyMiddleware`方法将其应用。如下所示： ```javascript import { createStore, applyMiddleware } from 'redux'; import ...
Redux——详解
热门推荐
qq_56989560的博客
06-25 2万+
Redux
react中redux的详细使用步骤
夜空孤狼啸的博客
04-06 2962
redux三大核心 1 action 触发reducer方法动作 2 reducer 3 store redux使用 1 安装redux react-redux cnpm i redux react-redux --save-dev 2 创建store.js import {createStore} from 'redux' import 自定义名字 from 'reducers文件中的对应的reducer' const store=createStore(自定义名字) export default
在 React 中使用 Redux 的 4 种写法
fe_watermelon的博客
06-04 1841
大家好，我是前端西瓜哥。今天我们看看React 中使用 Redux 的 4 种写法。Redux 是一种状态容器 JS 库，提供可预测的状态管理，经常和 React 配合来管理应用的全局状态，进行响应式组件更新。Redux 一般来说并不是必须的，只有在项目比较复杂的时候，比如多个分散在不同地方的组件使用同一个状态。对于这种情况，如果通过 props 层层传递，代码会变得不可维护，这时候我们可以考虑使用 Redux 这类状态管理库。我们创建一个 User 组件，显示用户名，并支持设置用户名。先看看不使用 Red
Redux的一些总结
weixin_34318956的博客
10-21 225
Redux 学习笔记在浅说Flux开发中，简单介绍了Flux及其开发方式。Flux可以说是一个框架，其有本身的 Dispatcher 接口供开发者；也可以说是一种数据流单向控制的架构设计，围绕单向数据流的核心，其定义了一套行为规范，如下图：Redux的设计就继承了Flux的架构，并将其完善，提供了多个API供开发者调用。借着react-redux，可以很好的与React结合，开发组件化程度极高的现...
最新版react-redux使用
09-13
最新版的 react-redux 使用方法如下： 首先，确保你的项目已经安装了 react-redux 依赖包。你可以使用以下命令安装它： ``` npm install react-redux ``` 或 ``` yarn add react-redux ``` 接下来，你需要创建一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值