当前位置：首页 > news >正文

Redux,react-redux,dva,RTK

news 2025/7/18 11:38:11

1.redux的介绍

Redux – 李立超 | lilichao.com

2.react-redux

1）react-Redux将所有组件分成两大类

UI组件
1. 1. 只负责 UI 的呈现，不带有任何业务逻辑
  2. 通过props接收数据(一般数据和函数)
  3. 不使用任何 Redux 的 API
  4. 一般保存在components文件夹下
容器组件
1. 1. 负责管理数据和业务逻辑，不负责UI的呈现
  2. 使用 Redux 的 API
  3. 一般保存在containers文件夹

2）react-redux相比较于react的不同，在于它提供了一些api来方便我们使用redux，

1.Provider 组件： Provider是react-redux库提供的顶层组件，它可以包裹整个React应用。通过Provider，Redux的store可以被传递给整个React组件树，使得所有的组件都能够访问Redux的状态。

2.connect 函数： connect是react-redux提供的函数，它可以连接React组件与Redux的store，并在组件中注入Redux的状态和操作。这样，组件就能够通过props直接访问Redux中的状态，而不需要手动订阅状态变化或分发actions。

代码示例：（还是以一个简单的计数器作为例子）

创建Redux store 和 reducer：

// 文件：store.js
import { createStore } from 'redux';const initialState = {count: 0,
};const counterReducer = (state = initialState, action) => {switch (action.type) {case 'INCREMENT':return { ...state, count: state.count + 1 };case 'DECREMENT':return { ...state, count: state.count - 1 };default:return state;}
};const store = createStore(counterReducer);export default store;

创建React组件，使用react-redux中的connect函数连接React组件与Redux store：

// 文件：Counter.js
import React from 'react';
import { connect } from 'react-redux';const Counter = ({ count, increment, decrement }) => (<div><p>Count: {count}</p><button onClick={increment}>Increment</button><button onClick={decrement}>Decrement</button></div>
);const mapStateToProps = (state) => ({count: state.count,
});const mapDispatchToProps = (dispatch) => ({increment: () => dispatch({ type: 'INCREMENT' }),decrement: () => dispatch({ type: 'DECREMENT' }),
});export default connect(mapStateToProps, mapDispatchToProps)(Counter);

在应用的入口文件中，使用Provider组件将Redux store传递给整个应用：

// 文件：index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';const App = () => (<Provider store={store}><Counter /></Provider>
);ReactDOM.render(<App />, document.getElementById('root'));

3.dva.js

1）dvajs，全称是"DvaJS"，是一个基于React和Redux的前端应用框架。它是一个由阿里巴巴出品的框架，旨在简化React应用的开发流程，尤其是在状态管理方面。DvaJS借鉴了Redux的思想，但在其基础上进行了封装，提供了一些方便开发的额外特性。

官网：快速上手 | DvaJS

与传统的Redux和React-Redux相比，DvaJS 提供了更加简化和约定的开发方式，主要包括以下几个核心概念：

Model： DvaJS引入了Model的概念，将数据、业务逻辑和界面表现进行了组织。一个Model包括state、reducers、effects等内容，使得相关的代码可以更容易地维护在一起。
Effects： Effects是用于处理异步操作（例如数据请求）的地方。在DvaJS中，Effects通过Redux-saga来处理异步流程，使得异步逻辑更加清晰。
Reducer和Action的简化： DvaJS封装了Redux的Reducer和Action的创建，通过一些简单的约定，减少了编写冗长的Reducer和Action的代码。
Router的集成： DvaJS内置了React-Router，使得路由的管理变得更加简单。

计数器实例：

// models/counter.js
export default {namespace: 'counter',state: 0,reducers: {increment(state) {return state + 1;},decrement(state) {return state - 1;},},
};// index.js
import React from 'react';
import dva from 'dva';
import { connect } from 'dva';
import Counter from './Counter';// 创建dva应用
const app = dva();// 注册Model
app.model(require('./models/counter').default);// 注册路由
app.router(() => <Counter />);// 启动应用
app.start('#root');