状态管理redux（超细）

什么是redux

        Redux是 JS 的状态容器 , 提供了 可预测 的状态管理。 JavsScript 的状态容器就是装状态的容器 ,React 中 , 状态 就是state 。因此我们所谓的 JS 的状态容器就是去存储状态 state 的容器。通常在大型项目中使用 Redux 进 行状态管理

三大原则

Redux 可以用这三个基本原则来描述：

1. 单一数据源：整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一

一个 store 中。

2. State 是只读的：唯一改变 state 的方法就是触发 action ， action 是一个用于描述已发生事件的普

通对象。

3. 使用纯函数来执行修改：为了描述 action 如何改变 state tree ，你需要编写 reducers

为什么要用redux？

1. React 管理不断变化的 state 是非常困难的 , 需要通过 constructor 去定义 state, 要通过 this.setState 去

修改这个 state 。

2. React 是在视图层帮助我们解决了 DOM 的渲染过程 , 但是 State 依然是留给我们自己来管理。之前学

习过的组件传值 props 、 context 等等 ,

3. 当没有使用 redux 的时候我们实现兄弟组件传值是比较麻烦的 , 代码很复杂冗余。

redux的基本使用

下载依赖

yarn add react-redux redux

在store.js创建仓库

import { legacy_createStore as createStore } from 'redux'
const initialState = {} // 初识状态
// reducers
const reducer = (state = initialState, action) => { // reducer可以接受state，
但是绝对不能改变state
}
// 创建仓库
export default createStore(reducer)

在index项目入口文件引入store注入到根组件中

// 引入redux
import store from './redux/store'
import { Provider } from 'react-redux'
......
root.render(
<Provider store={store}>
<App />
</Provider>
);

编写action

        Action 是把数据从应用（这里之所以不叫 view 是因为这些数据有可能是服务器响应，用户输入或其它 非 view 的数据 ）传到 store 的有效载荷。它是 store 数据的 唯一 来源。一般来说你会通过

store.dispatch() 将 action 传到 store 。

        要想更新 state 中的数据，你需要发起一个 action 。 Action 就是一个普通 JavaScript 对象用来描述发生了什么。

        Action 创建函数 就是生成 action 的方法。 “action” 和 “action 创建函数 ” 这两个概念很容易混在一起， 使用时最好注意区分。

// store/index.js
const CHANGE_MSG = 'CHANGE_MSG'
export const a_changeMsg = payload => {
return {
type: CHANGE_MSG,
payload
}
}

编写reducer

        为了把 action 和 state 串起来，开发一些函数，这就是 reducer ， reducer 本质上就是一个纯函数。再次 地，没有任何魔法，reducer 只是一个接收 state 和 action ，并返回新的 state 的函数。 对于大的应用 来说，不大可能仅仅只写一个这样的函数，所以我们编写很多小函数来分别管理 state 的一部分

// store/index.js
// reducer可以接受state，但是绝对不能改变state
const CHANGE_MSG = 'CHANGE_MSG'
const initialState = {
msg: '你好，李焕英'
}
const reducer = (state = initialState, action) => {
switch(action.type) {
case CHANGE_MSG:
return { ...state, msg: action.payload }
default:
return state
}
}

组件使用useSelector和useDispatch来操作redux

// Redux.jsx
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { a_changeMsg } from './store'
export default function Redux() {
const msg = useSelector(state => state.msg) // 使用hooks中的useSelector获取
redux仓库中的state
const dispatch = useDispatch() // 使用hooks中的useDispatch调用redux=>action来
修改数据
return (
<>
<h1>{ msg }</h1>
<button onClick={ () => dispatch(a_changeMsg('你好，贾玲她妈')) }>修改
</button>
</>
)
}

异步操作

// store/index.js
import { legacy_createStore as createStore } from 'redux'
......
export const a_asyncChangeMsg = payload => {
setTimeout(() => { // 模拟异步请求接口
return {
type: CHANGE_MSG,
payload
}
}, 0)
}
......
export default createStore(reducer)

// Redux.jsx
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { a_asyncChangeMsg } from './store'
export default function Redux() {
const msg = useSelector(state => state.msg) // 使用hooks中的useSelector获取
redux仓库中的state
const dispatch = useDispatch() // 使用hooks中的useDispatch调用redux=>action来
修改数据
return (
<>
<h1>{ msg }</h1>
<button onClick={ () => dispatch(a_asyncChangeMsg('你好，贾玲她妈')) }>修
改</button>
</>
)
}

在 redux 的工作流中， reducer 是纯函数，内部不能进行异步操作。那么我们只能将异步的操作放入在

actionCreator中进行，但是如果直接这样写会报错那我们需要把 redux 代码改造一下。

安装redux-thunk

yarn add redux - thunk

修改store.js，引入中间件

import { legacy_createStore as createStore, applyMiddleware } from 'redux'
import { thunk } from 'redux-thunk' // 处理redux异步任务的中间件
......
// applyMiddleware 应用中间件，对store中的dispatch方法进行增强
export default createStore(reducer, applyMiddleware(thunk))

修改actions，返回一个函数

export const a_asyncChangeMsg = payload => {
return (dispatch, getState) => {
setTimeout(() => {
dispatch(a_changeMsg('你好，贾玲她妈'))
}, 1000)
}
}

测试异步代码

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { a_asyncChangeMsg } from './store'
export default function Redux() {
const msg = useSelector(state => state.msg) // 使用hooks中的useSelector获取
redux仓库中的state
const dispatch = useDispatch() // 使用hooks中的useDispatch调用redux=>action来
修改数据
return (
<>
<h1>{ msg }</h1>
<button onClick={ () => dispatch(a_asyncChangeMsg()) }>修改</button>
</>
)
}

以上就是rdeux的基本介绍与使用，如有错误请指正！