React 中 redux 详解

一、Redux

1.Redux 是什么？

Redux 是一个独立的JavaScript 状态管理库， 非React内容之一，提供可预测化的状态管理。它只有2kb,在开发大型项目处理数据流基本上都用到了Redux。

Redux 官方文档 : https://www.redux.org.cn/

2.安装

npm i redux

3.为什么使用 Redux ?

Redux 本身是 MVVM渐进式框架 M(数据模型) - V(视图) - VM(虚拟模型)
react 的 redux 其实就相当于 vue 的 vuex

4.核心概念

• 理解Redux 核心几个概念与它们之间的关系
• state
• reducer
• store
• action

（1）state 对象

通常我们会把应用中的数据存储到一个对象树中进行统一管理，我们把这个位置称为： state

（2）state 是只读的

这里需要注意的是，为了保证数据状态的可维护性和测试，不推荐直接修改state中的原数据

（3） 通过纯函数修改 state

什么是纯函数

（4）纯函数 – 函数式编程的一种概念

• 1.相同的输入永远返回相同的输出

• 2.不修改函数的输入值

• 3.不依赖外部环境状态

• 4.无任何副作用 (例如：异步请求以及定时器造成的问题)

• 使用纯函数的好处

  • 1.便于测试
  • 2.有利于重构

（5）action 对象

• 我们对state 的修改是通过reducer 纯函数来进行的，同时通过传入的 action 来执行具体的操作

• action 是一个对象

• type 属性： 表示要进行操作的动作类型， 增删改查

• payload属性： 操作 state 的同时传入的数据

• 但是这里需要注意的是，我们不直接去调用Reducer函数,而是通过Store对象提供的dispatch方法来调用

（6）Store 对象 (负责存储的仓库)

为了对 steta, reducer, action,进行统一的管理和维护，我们需要创建一个Store对象(仓库)

5.redux 三大原则

• 单一数据源： 整个应用的state 被储存在一棵 obeject tree中，并且这个object tree 只存在于唯一的store中
• State 是只读的，唯一改变state的方法就是触发 action，action是一个用于描述已发生事件的普通对象
• 使用纯函数来进行修改

二. Redux 基本使用

代码展示

import React from "react";
import {
   createStore} from "redux"

function reducer(state={
   
  name:"小明",
  age:18
},action){
   
  return state;
}

let store = createStore(reducer);
console.log(store)