【React】知识点归纳：redux

  • Z时代
  • 2024-01-10
  • 分类：综合

react

redux

  • redux 理解

      • 学习文档

      • redux 是什么?

      • redux 工作流程

  • redux 的核心 API

      • createStore()

      • store 对象

      • applyMiddleware()

      • combineReducers()

  • redux 的三个核心概念

      • action

      • reducer

      • store

  • 使用redux编写应用案例

redux 理解

学习文档

  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
}

  1. 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)

  1. 此对象的功能?

    getState(): 得到 state

    dispatch(action): 分发 action, 触发 reducer 调用, 产生新的 state

    subscribe(listener): 注册监听, 当产生了新的 state 时, 自动调用

使用redux编写应用案例

网址：https://blog.csdn.net/qq_41846861/article/details/86701986

以上是 【React】知识点归纳：redux 的全部内容， 来源链接： utcz.com/z/383394.html

回到顶部