Redux网站首页 技术交流

Redux

阿泽不会飞 2023-07-08 04:00:03

简介Redux

Redux

作用

集中式管理react、vue、angular等应用中多个组件的状态，是一个库，不单单可用于react，只是更多的用于react中

模型图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AaFD3raR-1682994570670)(img/redux模型图.png)]

三个核心

action

作用：action是把数据从应用传到store的有效载荷，是store数据的唯一来源
创建

import { INCREMENT, DECREMENT } from './constant'

export const incrementAction = (data) => {
  return { type: INCREMENT, data }
}

export const decrementAction = (data) => {
  return { type: DECREMENT, data }
}

页面上的使用：通过分发action操作数据

import { incrementAction, decrementAction } from './redux/actions'

export default class index extends Component {
  increment = () => {
    const { value } = this.selectNumber
    store.dispatch(incrementAction(value))
  }
}

异步action：同步action中返回值为对象，而异步action中返回值为函数，其中一般会调用同步action

export const incrementAsyncAction = (data, delay) => {
  return (dispatch) => {
    setTimeout(() => {
      dispatch(incrementAction(data))
    }, delay)
  }
}

reducer

作用：reducer指定了应用状态的变化如何响应action并发送到store中
特征：本质是一个纯函数，接收两个参数，之前的状态(preState)、动作对象(action)。第一次被调用时，preState为undefined
创建

import { ADD_PERSON } from '../constant'

export default function personReducer(preState, action) {
  if (preState === undefined) {
    preState = [{
      id: '001',
      name: 'Tom',
      age: 23
    }]
  }

  // 从action中取出type和data
  const { type, data } = action

  switch (type) {
    case ADD_PERSON:
      // 没有对preState进行push或unshift操作，因为redux默认若返回值和之前状态一致，则不更新页面
      return [data, ...preState]
    default:
      return preState
  }
}

纯函数
只要是同样的输入，必定得到同样的输出。遵循以下约束

不得改写参数
不能调用I/O的API
不能调用Date.new()或者Math.random()等不纯的方法，因为每次会得到不一样的结果

store

作用：将action和reducer联系在一起，维持应用中的状态
特征：一个应用只有一个store。当需要拆分数据处理逻辑时，应该使用多个reducer

创建

import { legacy_createStore } from 'redux'
import countReducer from './reducer'

export default legacy_createStore(countReducer)

当使用异步action后，需对store进行修改，使用redux-thunk和中间件支持异步action，修改后的store文件如下：

import { legacy_createStore, applyMiddleware } from 'redux'
// 用于支持异步action
import thunk from 'redux-thunk'
import countReducer from './reducer'

export default legacy_createStore(countReducer, applyMiddleware(thunk))

页面上取值：

render() {
 return (
   <div>
     <h1>当前求和为{store.getState()}</h1>&nbsp;
   </div>
 )
}

react-redux

定义

react-redux其实是Redux的官方React绑定库，其中封装了一些Redux与React连接的操作，可以是Redux的使用更加简单

模型图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ww8vq9Ro-1682994570671)(img/react-redux模型图.png)]

规则

所有的UI组件被一个容器组件包裹，它们是父子关系
UI组件不与Redux进行操作，而是由容器组件与Redux进行操作，可以使用Redux的任意api
容器组件会传给UI组件如下数据：
1. 状态，即mapStateToProps()
2. 操作状态的方法，即mapDispatchToProps()

基础使用（见04-react-redux基础使用）

建立容器组件时的注意点

容器组件与UI组件通过react-redux中的connect进行连接，传递mapStateToProps和mapDispatchToProps
mapStateToProps()
1. 用于传递状态
2. 返回一个对象
3. react-redux在调用该函数时已经传入了state
4. 此处的值传入UI组件中，UI组件可使用this.props.xxx拿到对应的值
5. 用到的store在根目录中通过Provider包裹App组件并传入store的方式获取
```
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
)
```
mapDispatchToProps()
1. 用于传递操作状态的方法
2. 返回一个对象，对象的key自定义，value是一个方法
3. 注意简写方式

建立UI组件时的注意点

不直接参与Redux的使用
使用this.props.xxx拿到容器组件传来对应的值

融合UI组件与容器组件

开发时将UI组件与容器组件进行融合后放到一个文件中（见，05-融合UI组件与容器组件）

多个组件间的数据共享（重要，见06-react-redux数据共享）

完善各个组件的action和reducer
合并reducer，如下

import { combineReducers } from 'redux'
import countReducer from './reducers/count'
import personReducer from './reducers/person'

/**
 * 合并Reducer
 * 使用combineReducers合并Reducer，key为自定义，value为reducer
 */
export default allReducer = combineReducers({
  count: countReducer,
  persons: personReducer
})

注意：合并reducer后导致state变化，变为一个新的对象，对于组件mapStateToProps中对应的state需要通过.属性的方式取到
3. 修改store，使用合并后的reducer

import { legacy_createStore, applyMiddleware } from 'redux'
// 用于支持异步action
import thunk from 'redux-thunk'
// 合并后的reducer
import allReducer from './reducers/index'

export default legacy_createStore(allReducer, applyMiddleware(thunk))