Redux,react-redux,dva,RTK

1.redux的介绍

Redux – 李立超 | lilichao.com

2.react-redux

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

1. UI组件
   1. 1. 只负责 UI 的呈现，不带有任何业务逻辑
      2. 通过props接收数据(一般数据和函数)
      3. 不使用任何 Redux 的 API
      4. 一般保存在components文件夹下
2. 容器组件
   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 提供了更加简化和约定的开发方式，主要包括以下几个核心概念：

1. Model： DvaJS引入了Model的概念，将数据、业务逻辑和界面表现进行了组织。一个Model包括state、reducers、effects等内容，使得相关的代码可以更容易地维护在一起。

2. Effects： Effects是用于处理异步操作（例如数据请求）的地方。在DvaJS中，Effects通过Redux-saga来处理异步流程，使得异步逻辑更加清晰。

3. Reducer和Action的简化： DvaJS封装了Redux的Reducer和Action的创建，通过一些简单的约定，减少了编写冗长的Reducer和Action的代码。

4. 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');

  4.RTK

Redux Toolkit（RTK） – 李立超 | lilichao.com