4、React：redux简介

最新推荐文章于 2022-02-17 16:09:08 发布

Surplus...

最新推荐文章于 2022-02-17 16:09:08 发布

阅读量177

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/m0_46861581/article/details/114539847

版权

React 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

1、什么是Redux
2、redux的三个核心概念
3、redux的核心API
4、react-reudx

1、什么是Redux

学习文档

英文文档：英文文档
中文文档：中文文档

什么是Redux

redux是一个专门用于做 状态管理 的JS库(不是react插件库)
它可以用在react, angular, vue等项目中, 但基本与react配合使用
作用：集中式管理React应用中多个组件共享的状态

什么情况下需要使用redux

某个组件的状态，需要让其他组件可以随时拿到（共享）
一个组件需要改变另一个组件的状态（通信）
总体原则：能不用就不用, 如果不用比较吃力才考虑使用

redux工作流程

Reducers：可以初始化状态(一次)，也可以加工状态(多次)

2、redux的三个核心概念

action

标识要执行行为的对象(动作的对象)
包含2个属性
- type：标识属性，值为字符串，唯一，必要属性
- data：数据属性，值类型任意，可选属性

eg： const action = { type: 'INCREMENT', data: 2 }

reducer

用于初始化状态、加工状态
加工时，根据旧的state和action，产生新的state的 纯函数

注意：返回一个新的状态，不要修改原来的状态

store

将state、action、reducer联系在一起的对象
那么如何得到此对象？

	import {createStore} from 'redux'
	import reducer from './reducers'
	const store = createStore(reducer)

这个对象的功能又是什么呢？

getState()：得到state
dispatch(action)：分发action，触发reducer调用，产生新的state
subscribe(listener)：注册监听, 当产生了新的state时, 自动调用

3、redux的核心API

createStore()

作用：创建包含指定reducer的对象

格式：

	import {createStore} from 'redux'
	import counter from './reducers/counter'
	const store = createStore(counter)

store对象

作用：redux库最核心的管理对象，它的内部维护着：state，reducer

核心方法：getState()，dispatch(action)，subscribe(listener)

格式：

	store.getState()
	store.dispatch({type:'INCREMENT', number})
	store.subscribe(render)

applyMiddleware()

作用：应用上基于redux的中间件(插件库)

格式：

import {createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk'  // redux异步中间件
const store = createStore(
  counter,
  applyMiddleware(thunk) // 应用上异步中间件
)

combineReducers()

作用：合并多个reducer函数

格式：

export default combineReducers({
  user,
  chatUser,
  chat
})

4、react-reudx

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

这里将组件分为两大类：UI组件，容器组件

UI组件

只负责UI的呈现，不带有任何的业务逻辑
通过props接受数据（一般数据和函数）
不使用任何redux的API
一般保存在components文件夹中

容器组件

负责管理数据和业务逻辑，不负责UI呈现
使用redux的API
一般保存在containers文件夹下

相关API：Provider、connect()、mapStateToprops()、mapDispatchToProps()

Provider

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

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

connect() ==> 由React-Redux提供

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])(MyComponent)

connect的作用：用于从 UI组件生成容器组件。是连接React组件和Redux store建立组件与store.state和dispatch的映射关系。连接操作不会改变原来的组件类。

eg:

import { connect } from 'react-redux'
const VisibleTodoList = connect()(TodoList);

TodoList是UI组件，VisibleTodoList就是由React-Redux通过connect方法自动生成的容器组件

但是，因为没有定义业务逻辑，上面的这个容器组件毫无意义，只是UI组件的一个单纯的包装层。为了定义业务逻辑，需要给出下面两方面的信息。

输入逻辑：外部的数据（即state），如何转换为UI组件的参数
输出逻辑：用户发出的动作如何变为Action对象，从UI组件传出去

connect方法的完整API

import { connect } from 'react-redux'

const VisibleTodoList = connect(
  	mapStateToProps,
  	mapDispatchToProps
)(TodoList)

API分析：connect方法接受两个参数：mapStateToProps和mapDispatchToProps。他们定义了UI组件的业务逻辑。前者负责输入逻辑（负责将state映射到UI组件的参数props），后者负责输出逻辑（负责将用户对UI组件的操作映射成Action）

mapStateToprops()

mapStateToProps是一个函数，建立一个从（外部的）state对象到（UI组件的）props对象的映射关系

const mapStateToprops = function (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

解析：mapStateToProps是一个函数，它接受state作为参数，返回一个对象。这个对象有一个todos属性，代表UI组件的同名参数，后面的getVisibleTodos也是一个函数，可以从state中算出todos的值

那么是如何计算的呢？

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case 'SHOW_ALL':
      return todos
    case 'SHOW_COMPLETED':
      return todos.filter(t => t.completed)
    case 'SHOW_ACTIVE':
      return todos.filter(t => !t.completed)
    default:
      throw new Error('Unknown filter: ' + filter)
  }
}