redux

最新推荐文章于 2023-01-17 15:54:46 发布
最新推荐文章于 2023-01-17 15:54:46 发布
阅读量135 收藏
点赞数
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ywy502/article/details/104306670
版权
学习文档
  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配合使用
  3. 作用: 集中式管理react应用中多个组件共享的状态

redux工作流程

在这里插入图片描述

什么情况下需要使用redux
  1. 总体原则: 能不用就不用, 如果不用比较吃力才考虑使用
  2. 某个组件的状态，需要共享
  3. 某个状态需要在任何地方都可以拿到
  4. 一个组件需要改变全局状态
  5. 一个组件需要改变另一个组件的状态
redux的核心API

createStore()

  1. 作用:
    创建包含指定reducer的store对象
  2. 编码:
import {createStore} from 'redux'
import counter from './reducers/counter'
const store = createStore(counter)

.store对象

  1. 作用:
    redux库最核心的管理对象
  2. 它内部维护着:
    state
    reducer
  3. 核心方法:
    getState()
    dispatch(action)
    subscribe(listener)
  4. 编码:
    store.getState()
    store.dispatch({type:‘INCREMENT’, number})
    store.subscribe(render)

. applyMiddleware()

  1. 作用:
    应用上基于redux的中间件(插件库)
  2. 编码:
import {createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk'  // redux异步中间件
const store = createStore(
  counter,
  applyMiddleware(thunk) // 应用上异步中间件
)

combineReducers()

  1. 作用:
    合并多个reducer函数
  2. 编码:
export default combineReducers({
  user,
  chatUser,
  chat
})
redux的三个核心概念

. action

  1. 标识要执行行为的对象
  2. 包含2个方面的属性
    a. type: 标识属性, 值为字符串, 唯一, 必要属性
    b. xxx: 数据属性, 值类型任意, 可选属性
  3. 例子:
    const action = {
    type: ‘INCREMENT’,
    data: 2
    }
  4. Action Creator(创建Action的工厂函数)
    const increment = (number) => ({type: ‘INCREMENT’, data: number})

. reducer

  1. 根据老的state和action, 产生新的state的纯函数
  2. 样例
		export default function counter(state = 0, action) {
		  switch (action.type) {
		    case 'INCREMENT':
		      return state + action.data
		    case 'DECREMENT':
		      return state - action.data
		    default:
		      return state
		  }
		}
  1. 注意
    a. 返回一个新的状态
    b. 不要修改原来的状态

. store

  1. 将state,action与reducer联系在一起的对象
  2. 如何得到此对象?
    import {createStore} from ‘redux’
    import reducer from ‘./reducers’
    const store = createStore(reducer)
  3. 此对象的功能?
    getState(): 得到state
    dispatch(action): 分发action, 触发reducer调用, 产生新的state
    subscribe(listener): 注册监听, 当产生了新的state时, 自动调用

使用redux编写应用

下载依赖包
npm install --save redux
例子：
先选数值，再选加、减、奇数时加、异步加
第一行是的结果
在这里插入图片描述
代码目录：
在这里插入图片描述
redux/action-types.js

/*

  action对象的type常量名称模块

 */

  export const INCREMENT = 'increment'

  export const DECREMENT = 'decrement'

redux/actions.js

/*

action creator模块

 */

  import {INCREMENT, DECREMENT} from './action-types'

  

  export const increment = number => ({type: INCREMENT, number})

  export const decrement = number => ({type: DECREMENT, number})

redux/reducers.js

/*

  根据老的state和指定action, 处理返回一个新的state

 */

  

  import {INCREMENT, DECREMENT} from './action-types'

  

  export function counter(state = 0, action) {

  console.log('counter', state, action)

  switch (action.type) {

    case INCREMENT:

      return state + action.number

    case DECREMENT:

      return state - action.number

    default:

      return state

  }

}

components/app.jsx

/*

  应用组件

 */

  import React, {Component} from 'react'

  import PropTypes from 'prop-types'

  import * as actions from '../redux/actions'

  

  export default class App extends Component {

  

  static propTypes = {

    store: PropTypes.object.isRequired,

  }

  

  increment = () => {

    const number = this.refs.numSelect.value * 1

    this.props.store.dispatch(actions.increment(number))

  }

  

  decrement = () => {

    const number = this.refs.numSelect.value * 1

    this.props.store.dispatch(actions.decrement(number))

  }

  

  incrementIfOdd = () => {

    const number = this.refs.numSelect.value * 1

  

    let count = this.props.store.getState()

    if (count % 2 === 1) {

      this.props.store.dispatch(actions.increment(number))

    }

  }

  

  incrementAsync = () => {

    const number = this.refs.numSelect.value * 1

    setTimeout(() => {

      this.props.store.dispatch(actions.increment(number))

    }, 1000)

  }

  

  render() {

    return (

      <div>

        <p>

          click {this.props.store.getState()} times {' '}

        </p>

        <select ref="numSelect">

          <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}>increment if odd</button>

        {' '}

        <button onClick={this.incrementAsync}>increment async</button>

      </div>

    )

  }

}

index.js

import React from 'react'

  import ReactDOM from 'react-dom'

  import {createStore} from 'redux'

  

  import App from './components/app'

  import {counter} from './redux/reducers'

  

  // 根据counter函数创建store对象

  const store = createStore(counter)

  

  // 定义渲染根组件标签的函数

  const render = () => {

  ReactDOM.render(

    <App store={store}/>,

    document.getElementById('root')

  )

}

  // 初始化渲染

  render()

  

  // 注册(订阅)监听, 一旦状态发生改变, 自动重新渲染

  store.subscribe(render)
问题
  1. redux与react组件的代码耦合度太高
  2. 编码不够简洁
react-redux

. 理解

  1. 一个react插件库
  2. 专门用来简化react应用中使用redux
    React-Redux将所有组件分成两大类
  3. UI组件
    a. 只负责 UI 的呈现，不带有任何业务逻辑
    b. 通过props接收数据(一般数据和函数)
    c. 不使用任何 Redux 的 API
    d. 一般保存在components文件夹下
  4. 容器组件
    a. 负责管理数据和业务逻辑，不负责UI的呈现
    b. 使用 Redux 的 API
    c. 一般保存在containers文件夹下

相关API

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


  2. connect()
    用于包装 UI 组件生成容器组件
import { connect } from 'react-redux'
  connect(
    mapStateToprops,
    mapDispatchToProps
  )(Counter)
  1. mapStateToprops()
    将外部的数据（即state对象）转换为UI组件的标签属性
  const mapStateToprops = function (state) {
   return {
     value: state
   }
  }
  1. mapDispatchToProps()
    将分发action的函数转换为UI组件的标签属性
    简洁语法可以直接指定为actions对象或包含多个action方法的对象

使用react-redux

  1. 下载依赖包
    npm install --save react-redux

目录
在这里插入图片描述
2) redux/action-types.js
不变
3) redux/actions.js
不变
4) redux/reducers.js
不变
5) components/counter.jsx

/*

UI组件: 不包含任何redux API

 */

  import React from 'react'

  import PropTypes from 'prop-types'

  

  export default class Counter extends React.Component {

  

  static propTypes = {

    count: PropTypes.number.isRequired,

    increment: PropTypes.func.isRequired,

    decrement: PropTypes.func.isRequired

  }

  

  increment = () => {

    const number = this.refs.numSelect.value * 1

    this.props.increment(number)

  }

  

  decrement = () => {

    const number = this.refs.numSelect.value * 1

    this.props.decrement(number)

  }

  

  incrementIfOdd = () => {

    const number = this.refs.numSelect.value * 1

    let count = this.props.count

    if (count % 2 === 1) {

      this.props.increment(number)

    }

  }

  

  incrementAsync = () => {

    const number = this.refs.numSelect.value * 1

    setTimeout(() => {

      this.props.increment(number)

    }, 1000)

  }

  

  render() {

    return (

      <div>

        <p>

          click {this.props.count} times {' '}

        </p>

        <select ref="numSelect">

          <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}>increment if odd</button>

        {' '}

        <button onClick={this.incrementAsync}>increment async</button>

      </div>

    )

  }

}
  1. containters/app.jsx
/*

  包含Counter组件的容器组件

 */

  import React from 'react'

  // 引入连接函数

  import {connect} from 'react-redux'

  // 引入action函数

  import {increment, decrement} from '../redux/actions'

  

  import Counter from '../components/counter'

  

  // 向外暴露连接App组件的包装组件

  export default connect(

  state => ({count: state}),

  {increment, decrement}

)(Counter)
  1. index.js
import React from 'react'

  import ReactDOM from 'react-dom'

  import {createStore} from 'redux'

  import {Provider} from 'react-redux'

  

  import App from './containers/app'

  import {counter} from './redux/reducers'

  

  // 根据counter函数创建store对象

  const store = createStore(counter)

  

  // 定义渲染根组件标签的函数

  ReactDOM.render(

  (

    <Provider store={store}>

      <App />

    </Provider>

  ),

  document.getElementById('root')

store.js

import React from 'react'
import {createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import {composeWithDevTools} from 'redux-devtools-extension'

import reducers from './reducers'

// 根据counter函数创建store对象
export default createStore(
  reducers,
  composeWithDevTools(applyMiddleware(thunk)) // 应用上异步中间件
)
问题
  1. redux默认是不能进行异步处理的,
  2. 应用中又需要在redux中执行异步任务(ajax, 定时器)
redux异步编程

下载redux插件(异步中间件)
npm install --save redux-thunk

目录
在这里插入图片描述
reducers.js

import {combineReducers} from 'redux'
import {
  INCREMENT,
  DECREMENT
} from './action-types'

function counter(state = 0, action) {
  console.log('counter', state, action)
  switch (action.type) {
    case INCREMENT:
      return state + action.number
    case DECREMENT:
      return state - action.number
    default:
      return state
  }
}

export default combineReducers({
  counter
})

index.js

import {createStore, applyMiddleware} from 'redux'

  import thunk from 'redux-thunk'

  // 根据counter函数创建store对象

  const store = createStore(

  counter,

  applyMiddleware(thunk) // 应用上异步中间件

  )

redux/actions.js

// 异步action creator(返回一个函数)

 export const incrementAsync = number => {

 return dispatch => {

   setTimeout(() => {

     dispatch(increment(number))

   }, 1000)

 }

}

components/counter.jsx

incrementAsync = () => {

  const number = this.refs.numSelect.value*1

  this.props.incrementAsync(number)

}

containers/app.jsx

import {increment, decrement, incrementAsync} from '../redux/actions'
// 向外暴露连接App组件的包装组件
export default connect(
  state => ({count: state}),
  {increment, decrement, incrementAsync}
)(Counter)
使用上redux调试工具

安装chrome浏览器插件

下载工具依赖包
npm install --save-dev redux-devtools-extension
. 编码

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


  const store = createStore(

  counter,

  composeWithDevTools(applyMiddleware(thunk)) 

  )
正义的小豆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Redux Demo
11-29
该文件是一个React Router + Redux的一个小Demo，通过该程序，我们可以了解Redux的使用原理，了解Action、Reducer、Store之间的作用关系。
react redux
10-05
react redux demo, 自己看了《深入浅出react和redux》,《React全栈++Redux+Flux+webpack+Babel整合开发》，《React与Redux开发实例精解》 这些书后的demo练习
Redux
qq_43539854的博客
04-27 422
Redux 对Redux的理解 Redux是一个用来管理数据状态的工具。因为React传递数据是单向的，父组件可以向子组件通过props传递数据，而子组件无法直接向父组件传递数据，这样的单向数据流成就了React的数据可控性。随着项目越来越大，state也越来越难以管理，而使用Redux可以轻松管理这些state。 Redux主要解决的问题 Redux主要解决的问题是将Redux的状态与React的UI绑定到一起，当使用dispatch(action)改变state时可以自动更新页面。 Redux的工作原
Redux学习笔记
qq_29582173的博客
05-06 328
Redux 基础知识 基础介绍 动机 为了更好的管理项目中的状态 Redux 为了让项目中的state变得可预测 核心概念:纯函数 Reducer 纯函数:简单来说就是，接收相同的参数时返回相同的结果。 Reducer:接收一个action和state返回一个新的state。 Redux的核心就是通过reducer来管理项目状态。在大的应用中，我们需要编写很多小函数来管理state的一部分。 Redux也提供了一些工具来简化这种模式，但主要的思想就是通过action对象来修改state。 三大原则
Redux 简介
qq_43505867的博客
12-17 796
然后，一旦收到数据，就会发送另一个 action，该 action 的 data 是请求返回的数据同时也代表 API 操作完成。在这种情况下，要确保返回当前的。在 Redux 中，有一个状态对象负责应用程序的整个状态， 这意味着如果有一个包含十个组件且每个组件都有自己的本地状态的 React 项目，那么这个项目的整个状态将通过 Redux。可以将 Redux action 视为信使，将有关应用程序中发生的事件信息提供给 Redux store， 然后 store 根据发生的 action 进行状态的更新。
《四》Redux Toolkit
最新发布
花铛
01-17 952
Redux Toolkit（RTK）是 Redux 官方推荐的编写 Redux 逻辑的方法。Redux 的编写逻辑过于繁琐，并且代码通常分拆在多个文件中，Redux Toolkit 就旨在解决 Redux 编写代码过于繁琐和分散的问题。Redux Toolkit 其实就是对 Redux 做了一层封装。
redux-devTools
08-20
redux-devtools.crx 版本 2.15.3 大小 5.6 MB 解决 使用安装redux.devTools后 Cannot read property 'state' of undefined 问题
Redux 介绍
03-27
详细介绍react redux使用，参考redux的数据流动、reducer、store、view的交互
redux-devtools
12-25
亲测可用的 redux 开发调试工具 , 鉴于网上的redux-devtools工具都是比较旧的，所以这里提供目前最新版本的redux-devtools-2.15.2.crx工具，提供给大家使用。良心推荐，所需积分比较低哈。 react-redux开发调试工具...
use-redux
03-19
已淘汰挂钩访问redux :warning: 现在提供了钩子支持。我强烈建议您使用官方的实施。如果您已经使用此程序包，切换到应该不会太困难。迁移到提供者首先要做的是将use-redux提供程序替换为react-redux提供程序。只需...
redux-devtools工具
04-26
redux-devtools 是一个非常棒的工具，它可以让你实时的监控Redux的状态树的Store
Redux DevTools
11-12
Redux DevTools： Redux 调试工具插件，如果你的项目是使用 react 去做的，在开发过程中必然不可少 Redux 。那么 Redux 调试工具插件也是必要的。
redux中文文档 完整版pdf
03-20
Redux由Dan Abramov在2015年创建的科技术语。是受2014年Facebook的Flux架构以及函数式编程语言Elm启发。很快，Redux因其简单易学体积小在短时间内成为最热门的前端架构。 Redux最主要是用作应用状态的管理。简言之...
redux devtools
09-06
react-redux开发调试工具，用于开发过程中redux传递流程展示，提高开发效率，快速定位问题。react-redux开发调试工具，用于开发过程中redux传递流程展示，提高开发效率，快速定位问题。
redux-demo:一个极其简单的Redux演示
05-27
从create-react-app到redux-demo项目运行地址项目运行：redux概述1、What is redux ?UI = render(state)，但是state只存在于组件内部。当页面有很多交互，有大量的组件之间的通信，那么我们仅仅使用react是极其复杂...
Redux调试工具
09-19
React Redux 开发chrome调试插件，方便复杂react开发调试。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值