”只有遇到 React 实在解决不了的问题，你才需要 Redux“
Redux应用的三大原则
- 单一数据源：整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。
- State 是只读的：唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。
- 使用纯函数来执行修改：为了描述 action 如何改变 state tree ，你需要编写 reducers。
严格的单向数据流是 Redux 架构的设计核心。Redux工作流程如下：
- action通过dispatch方法会派发给store
- store接收action，连同之前的state，一起传递给reducer
- reducer返回新的state给store
- state变化重新渲染
![]()
redux工作原理
redux工作原理
mapStateToProps和mapDispatchToProps
React-Redux 提供connect方法，用于从 UI 组件生成容器组件
connect方法接受两个参数：mapStateToProps和mapDispatchToProps
前者负责输入逻辑，即将state映射到 UI 组件的参数（props），后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。
import { connect } from 'react-redux'
import { setCustId } from '@/redux/custObj/actions'
//通过props获取值和方法
const { custId } = props.custInfo
useEffect(() => {
// 清空数据
props.setCustId('')
}, [])
function mapStateToProps (state) {
return {
custId: state.custId
}
}
function mapDispatchToProps (dispatch) {
return {
setCustId: (val) => {//传给props的方法名
dispatch(setCustId(val))//action里面的方法名
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(OrderDetail)
Action 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。
Action 本质上是 JavaScript 普通对象，其中type属性是必须的,来表示将要执行的动作。代码里过大时，type可以单独提出到一个文件中。
//action-type.js
//多数情况下，type 会被定义成字符串常量。
export const SET_CUST_ID = 'SET_CUST_ID'
export const USER_TYPE = 'USER_TYPE'
Action 创建函数 就是生成 action 的方法
//action.js
import * as type from './action-type'
/*setCustId是一个函数，返回的是action对象*/
export const setCustId= (value) => {
return {
type: type.SET_CUST_ID,
custId: value
}
}
Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的
reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state。
注意：不要修改 state；在 default 情况下返回旧的 state
//custObj/reducer.js
export const custId= (state = '', action) => {
switch (action.type) {
case type.SET_CUST_ID:
return action.custId
default:
return state
}
}
Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时，应该是 reducer 组合 而不是创建多个 store，使用 combineReducers() 将多个 reducer 合并成为一个对象
//store.js
import { createStore, combineReducers } from 'redux'
//引入不同模块的reducers
import * as custObj from './custObj/reducers'
import * as orderObj from './orderObj/reducers'
//createStore这个函数，用来生成Store
const store = createStore(
combineReducers({
...custObj,
...orderObj
}))
)
export default store
