react-redux的使用

最新推荐文章于 2023-06-22 14:53:32 发布
最新推荐文章于 2023-06-22 14:53:32 发布
阅读量177 收藏
点赞数
分类专栏： react 文章标签： react-redux的使用 redux调试工具如何使用 react-thunk reducer的合并 react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44162474/article/details/107939725
版权

文章目录

认识 react-redux

react-redux 是一个 react 的插件库，它是专门用来简化 react 应用中使用 redux的

传送门

react-redux 的使用

react-redux 相关 API

Provider

让所有组件都可以得到 state 数据

<Provider store={store}>
   <App />
</Provider>
connect()

用于包装 UI 组件生成容器组件

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

将外部的数据（即state对象）转换为UI组件的标签属性

const mapStateToProps = (state) => {
  return {
    counter: state.counter
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    increment: (value) => {
      dispatch(createIncrementAction(value));
    },
    decrement: (value) => {
      dispatch(createDecrementActio(value));
    }
  }
}
mapDispatchToProps()

将分发action的函数转换为UI组件的标签属性

const mapDispatchToProps = (dispatch) => {
  return {
    increment: (value) => {
      dispatch(createIncrementAction(value));
    },
    decrement: (value) => {
      dispatch(createDecrementActio(value));
    }
  }
}

传送门

redux-thunk的使用

处理异步编程的问题

store.js

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

let store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)));

export default store;

export const createIncrementAsyncAction = () => {
  return (dispatch) => {
    axios.get("http://localhost:3000/banner").then(res => {
      const data = res.data.data
      dispatch(createChangeBannersAction(data.banners));
    })
  }
}

reducer 的合并

import {combineReducers} from 'redux';
const reducer = composeEnhancers({
  counterInfo: counterReducer,
  bannersInfo: bannersReducer
});

redux 调试工具的使用

默认是不那个用的需要进行简答的处理，两种方法：

1、安装依赖包redux-devtools-extension，修改 store.js 文件

import { composeWithDevTools } from 'redux-devtools-extension'

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

2、引入 composeEnhancers

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
let store = createStore(reducer, composeEnhancers(applyMiddleware(thunk)));

export default store;

传送门

举例

实现一个简答的计数器，功能大致如下

在这里插入图片描述

不使用 redux
import React, { Component } from 'react';

class App extends Component {
  constructor() {
    super();
    this.state = {
      counter: 0
    }
  }

  render() {
    return (
      <div>
        <h2>当前计数：{this.state.counter}</h2>
        <select ref="selectRef">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        <button onClick={() => {this.increment()}}>+</button>
        <button onClick={() => {this.decrement()}}>-</button>
        <button onClick={() => {this.incrementAsync()}}>一秒后再加</button>
      </div>
    );
  }

  increment() {
    const { value } = this.refs.selectRef;
    let { counter } = this.state;
    counter += Number(value);
    this.setState({
      counter
    });
  }

  incrementAsync() {
    setTimeout(() => {
      this.increment();
    }, 1000);
  }

  decrement() {
    const { value } = this.refs.selectRef;
    let { counter } = this.state;
    counter -= Number(value);
    this.setState({
      counter
    });
  }
}

export default App;
使用 redux

index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";
import store from "./store/store";

ReactDOM.render(<App store={store}/>, document.getElementById("root"));

// 监听 state 的变化
store.subscribe(() => {
  ReactDOM.render(<App store={store}/>, document.getElementById("root"));
})

App.js

import React, { Component } from 'react';
import { createDecrementActio, createIncrementAction } from './redux/createActions'

class App extends Component {
  
  componentDidMount() {
    console.log(this.props.store);
  }

  render() {
    const { counter } = this.props.store.getState();
    return (
      <div>
        <h2>当前计数：{counter}</h2>
        <select ref="selectNumberRef">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        <button onClick={() => {this.increment()}}>+</button>
        <button onClick={() => {this.decrement()}}>-</button>
        <button onClick={() => {this.incrementAsync()}}>async</button>
      </div>
    );
  }

  increment() {
    const store = this.props.store;
    let { value } = this.refs.selectNumberRef;
   
    store.dispatch(createIncrementAction(Number(value)));
  }

  incrementAsync() {
    const store = this.props.store;
    let { value } = this.refs.selectNumberRef;

    setTimeout(() => {
      store.dispatch({
        type: 'incrementAsync',
        data: Number(value)
      })
    }, 1000);
  }

  decrement() {
    const store = this.props.store;
    let { value } = this.refs.selectNumberRef;
    
    store.dispatch({
      type: 'decrement',
      data: Number(value)
    })
  }
}

export default App;

index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";
import store from "./redux/store";

ReactDOM.render(<Redux store={store}/>, document.getElementById("root"));

// 监听 state 的变化
store.subscribe(() => {
  ReactDOM.render(<Redux store={store}/>, document.getElementById("root"));
})

store 文件夹

store.js

import { createStore } from 'redux';
import reducer from './reducer';
// 创建 store
const store = createStore(reducer);

export default store;

reducer.js

import { INCREMENT, DECREMENT } from './actionTypes';

const defaultState = {
  counter: 1
}

function handleCounter(preState = defaultState, action) {
  console.log(action);
  let newState;
  switch (action.type) {
    case INCREMENT:
      newState = {
        counter: preState.counter + action.data
      };
      return newState;

    case 'incrementIfOdd':
      newState = {
        counter: preState.counter + action.data
      };
      return newState;

    case 'incrementAsync':
      newState = {
        counter: preState.counter + action.data
      };
      return newState;
    case DECREMENT:
      newState = {
        counter: preState.counter - action.data
      };
      return newState;
    default:
      return preState;
  }
}

export default handleCounter;

createActions.js

import { INCREMENT, DECREMENT, INCREMENTASYNC } from './actionTypes';
export const createIncrementAction = value => ({
  type: INCREMENT,
  data: value
})

export const createDecrementActio = value => ({
  type: DECREMENT,
  data: value
})


export const createIncrementAsyncAction = (value, delay) => {
  return (dispatch) => {
    setTimeout(() => {
      dispatch(createIncrementAction(value, delay));
    }, delay);
  }
}

actionTypes.js

export const INCREMENT = 'increment';
export const DECREMENT = 'decrement';
export const INCREMENTASYNC = 'incrementAsync';
使用 react-redux

index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";
import store from "./store/store";


import { Provider } from "react-redux";

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

将 App.js 进行拆分

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pA5syu64-1597136908932)(C:\Users\27857\Desktop\QQ截图20200811153735.png)]

counter.jsx

import React, { Component } from 'react';

class Counter extends Component {
  
  componentDidMount() {
    console.log(this.props)
  }

  render() {
    return (
      <div>
        <h2>当前计数：{this.props.counter}</h2>
        <select ref="selectNumberRef">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        <button onClick={() => {this.increment()}}>+</button>
        <button onClick={() => {this.decrement()}}>-</button>
        <button onClick={() => {this.incrementIfOdd()}}>odd</button>
        <button onClick={() => {this.incrementAsync()}}>async</button>
      </div>
    );
  }

  increment() {
    let { value } = this.refs.selectNumberRef;
    this.props.increment(Number(value));
  }

 
  incrementAsync() {
    let { value } = this.refs.selectNumberRef;
    this.props.incremenAsync(Number(value), 1000);
    
  }

  decrement() {
    let { value } = this.refs.selectNumberRef;
    this.props.decrement(Number(value));
  }
}

export default Counter;

counter_container.js

import { connect } from 'react-redux';
import Counter from '../components/counter';
import { createDecrementActio, createIncrementAction, createIncrementAsyncAction } from '../redux/createActions';

const mapStateToProps = (state) => {
  return {
    counter: state.counter
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    increment: (value) => {
      dispatch(createIncrementAction(value));
    },
    decrement: (value) => {
      dispatch(createDecrementActio(value));
    }
  }
}

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

可以对上面进行简单优化

export default connect(
  state =>({
    counter: state.counter
  }),
  {
    increment: createIncrementAction,
    decrement: createDecrementActio,
    incremenAsync: createIncrementAsyncAction
  }
)(Counter)

connect 函数的作用

function connect(fn) {
  return (value) => {dispatch(fn(value))}
}
亦是木子也是雨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
react-redux的简单使用
xiaohesong
11-02 3734
正式接触react应该有两个月了,项目开始也有一个月了, 开始新项目的时候就没有打算使用redux,因为感觉学习这个的成本挺高. 这两天,项目第一版已经出来了,昨天下午有时间就抓紧时间看看redux相关的东西,大致有个了解,然后今天就照葫芦画瓢,把一个模块给整理了下,换成了redux. 在这里记录下使用,以备后需.react-redux使用前得需要安装npm i --save react-re
react redux使用
waillyer的博客
05-05 337
创建项目 没有环境先安装： $ npm install -g create-react-app 创建项目 create-react-app react-redux-ant
react-redux使用
qq_60976312的博客
08-10 640
react-redux使用和配置
react-redux-ts：React样板
02-06
**React-Redux-TS：React样板** React是一个流行的JavaScript库，用于构建用户界面，特别是单页应用程序（SPA）。Redux是一个可预测的状态管理工具，它帮助开发者管理应用中的全局状态。TypeScript是JavaScript的一...
typescript-react-redux-ie8:Typescript-react-redux-ie8，在线演示
05-11
我在项目中写3个DEMO：todomvc without immutabeljs (ts + react + redux)[todo] todomvc with immutablejs (ts + react+ redux + immutablejs)[todo] hackernews (ts + react + redux + immutablejs)使用时，只需要...
create-react-redux-app：基于create-react-app的React样板
02-05
创建React Redux应用 该项目是通过。 该项目包括额外的redux软件包和改进的文件结构。...git clone git@github.com:YUzhva/create-react-redux-app.git NEW_PROJECT_NAME # with HTTPS git clone https://g
react-redux-demo:基于react redux react-router的SPA演示
04-27
create-react-app：脚手架react：负责页面组件构建react-router：负责单页应用路由部分的控制redux：负责管理整个应用的数据流react-redux：将react与redux这两部分相结合redux-thunk：redux的一个中间件。...
React-Redux-Toolkit
03-28
该项目将CRA与Redux-Toolkit结合使用（单独安装）。 警告：该项目不必要地使用Redux。 该项目的唯一目的是尝试Redux-Toolkit。 需要API密钥才能搜索电影 转到此处，将API密钥发送到您的邮件中。 在项目根目录（以及...
React - redux 使用（由浅入深）
技术共享，共同进步！
12-06 6374
React - redux 使用（由浅入深）
React中redux的使用
weixin_53296485的博客
06-22 2240
Redux 是一个状态管理库，它可以帮助你管理应用程序中的所有状态
在react中使用redux
qq_45549336的博客
03-31 1418
react中使用redux
React-redux使用教程
xm1037782843的博客
10-30 2792
react-redux,Redux 是 JavaScript 应用的状态容器
react中redux的使用
hx_programmer的博客
11-15 570
什么是redux Redux 是 JavaScript 应用的状态容器，提供可预测的状态管理。 为什么Rect要用 Redux React 是 DOM 的一个抽象层（UI 库），并不是 Web 应用的完整解决方案。因此react在涉及到数据的处理以及组件之间的通信时会比较复杂。 对于大型的复杂应用来说，这两方面恰恰是最关键的。因此，只用 React，写大型应用比较吃力 不使用 Redux ： 只能使用父子组件通讯、状态提升等 React 自带机制 ...
react redux的简单使用
web修理工
08-24 136
index.js import React from 'react'; //react 模板 import ReactDOM from 'react-dom'; // jax语法 import './index.css';// 全局样式 import App from './App'; // 主要模块 import * as serviceWorker from './serviceWorker'; //渲染问题 import { BrowserRouter } from "react-router-do
react状态管理的库———redux
weixin_46156304的博客
04-23 345
今天去吃饭的时候，一个挺帅的小哥哥找我v来着，啊啊啊，好尴尬啊！！！但是马上就要就业了，压力好大，只想学习，没有给他，好可惜。 学习文档 1.英文文档: https://redux.js.org/ 2.中文文档: http://www.redux.org.cn/ 3.Github: https://github.com/reactjs/redux redux是什么 1.redux是一个专门用于做状态管理的JS库(不是react插件库)。 2.它可以用在react, angular, vue等项目中, 但.
最新版react-redux使用
最新发布
09-13
最新版的 react-redux 使用方法如下： 首先，确保你的项目已经安装了 react-redux 依赖包。你可以使用以下命令安装它： ``` npm install react-redux ``` 或 ``` yarn add react-redux ``` 接下来，你需要创建一个...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值