react中redux的使用

什么是redux

        Redux 是 JavaScript 应用的状态容器，提供可预测的状态管理。

为什么Rect要用 Redux

        React 是 DOM 的一个抽象层（UI 库），并不是 Web 应用的完整解决方案。因此react在涉及到数据的处理以及组件之间的通信时会比较复杂。 对于大型的复杂应用来说，这两方面恰恰是最关键的。因此，只用 React，写大型应用比较吃力

• 不使用 Redux  ：

  • 只能使用父子组件通讯、状态提升等 React 自带机制

  • 处理远房亲戚(非父子)关系的组件通讯时乏力

  • 组件之间的数据流混乱，出现 Bug 时难定位

• 使用 Redux ：

  • 集中式存储和管理应用的状态

  • 处理组件通讯问题时，无视组件之间的层级关系

  • 简化大型复杂应用中组件之间的通讯问题

  • 数据流清晰，易于定位 Bug

Redux 三个核心概念

        1.action           

• 一个js对象，包含两个属性：

  • type： 标识属性，值是字符串。多个type用action分开

  • payload：数据属性，可选。表示本次动作携带的数据

• actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。

• 特点：

  • 只描述做什么

  • JS 对象，必须带有 type 属性，用于区分动作的类型

  • 根据功能的不同，可以携带额外的数据，配合该数据来完成相应功能

        2.reducer

• 一个纯函数

• 作用

  • 1. 初始化状态

    2. 修改状态

• 修改状态

  根据传入的旧状态和action，返回新状态

  公式：(previousState, action) => newState

        3.store

• store：仓库，Redux 的核心，整合 action 和 reducer

• 特点：

  • 一个应用只有一个 store

  • 维护应用的状态，获取状态：store.getState()

  • 创建 store 时接收 reducer 作为参数：const store = createStore(reducer)

  • 发起状态更新时，需要分发 action：store.dispatch(action)

• 其他 API， — 订阅(监听)状态变化：const unSubscribe = store.subscribe(() => {}) — 取消订阅状态变化： unSubscribe()

Redux功能演示核心代码

        1.安装redux

npm i redux

         2.定义reducer

initState = 0
export default function reducer(state = initState, action) {
  return state
}

        3.定义action

const action1 = { type:'addN', payload: 12 }
// store.dispatch(action1)

const action2 = { type:'add', payload: 1 }

        4.定义store

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

        5.添加订阅者

// 导入store
store.subscribe(() => {
  ReactDOM.render(<App />, document.getElementById('root'))
})

使用和修改store

        1.获取状态

store.getState()

        2.修改状态

store.dispatch(action)