前端

## 前言

在 Redux 中，中间件是对 **`dispatch`** 函数进行扩展的一种方式，用来处理 **`action`** 和 **`store`** 之间的通信和交互。中间件的作用可以分为两类：一类是应用领域逻辑相关的中间件，一类是通用的、与应用领域逻辑无关的中间件。

Redux 需要中间件的原因是：通过中间件可以实现 action 和 store 之间的断点，方便地对 action 进行拦截和处理，在 action 到达 reducer 之前，执行某些额外操作（如日志记录、异步请求、错误处理等），或是对 action 进行修改。同时，由于 Redux 的单向数据流特性，中间件可以很好地控制整个应用程序中的数据流，使代码具有更加可读性和可维护性。

## 常用中间件

### 一、React thunk

**上一篇分享介绍了Redux的工作流程，其中修改store中数据是通过store.disptch方法传递action信号来达到目的，这是同步修改state的方式。可是真正项目中经常会通过Ajax请求到数据再修改store。**

```javascript
export const doSomeing = (text) => {
    return (dispatch) => {
        dispatch({
            type: 'LOAD_MORE_WORK',
            msg: 'pending',
        });
        fetch('<http://levenx.com>').then(resp => {
            // console.log('[resp]', resp.status);
            if (resp.status === 200) return resp.json();
            throw new Error('not 200 this time'); // 美滴很
        }).then(json => {
            /* 2. 异步结束了，发结果action */
            dispatch({
                type: 'LOAD_MORE_WORK',
                msg: json.name,
            });
        }).catch(error => {
            /* 3. 倒霉催的，发报错action */
            dispatch(
                {
                    type: 'do',
                    payload: text
                }
            );
        });
    }
}

```

**我们希望action可以处理异步动作，如果不借助中间件来处理的话，会报错。**

![https://cdn.portal.levenx.com/levenx-world/dc7d8cfa0326493abbd315735d593132.png](https://cdn.portal.levenx.com/levenx-world/7412bec49fd94238adbf8f074a7f6014.png "错误截图")

**store**

接受action传递到信号是一个对象，即

**action**

方法返回的是object,但是处理异步操作时，我们使用如上代码，

**action**

传递给

**store**

的是一个function，如果没有中间件帮忙处理一下，

**store**

是不接受的。

**react-thunk**就是来解决异步问题的。

1. 安装中间件

```bas
 npm install react-thunk

```

2. 初始化store时注入中间件

```javascript
import { createStore, applyMiddleware，compose} from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer'

const initState = { money: 0 };

//redux devtools 和 其他中间件 一起使用时，需要做如下判断
const composeEnhancers =
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;

const enhancer = composeEnhancers(
    applyMiddleware(thunk)
);

//创建store工厂
const store = createStore(
    reducer,
    initState,
    enhancer
);

export default store;

```

初始化**store**时，注入**react-thunk**,**action**便可以返回function，**react-thunk**通过异步请求的不同状态disptch给 **store**对应的object对象作为信号。

### 二、redux-logger

使用效果如下图，每次action修改state时，都会在控制台打印出关键信息，便于开发者追溯状态。

![https://img-blog.csdnimg.cn/20200326001844387.png?x-oss-process=image/watermark,type<span data-type=](https://cdn.portal.levenx.com/levenx-world/fb1f39fb9ee94beaad78cb0f7dc72bc7.watermark,type_zmfuz3pozw5nagvpdgk,shadow_10,text_ahr0chm6ly9ibg9nlmnzzg4ubmv0l20wxzm3odkwmjg5,size_16,color_ffffff,t_70)\_ZmFuZ3poZW5naGVpdGk,shadow\_10,text\_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3ODkwMjg5,size\_16,color\_FFFFFF,t\_70" />

**配置：**

```javascript
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger'
import reducer from './reducer'

const initState = { money: 0 ,levenx:''};

const composeEnhancers =
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;

const enhancer = composeEnhancers(
    applyMiddleware(thunk, logger)
);

//创建store工厂
const store = createStore(
    reducer,
    initState,
    enhancer
);

export default store;

```

后续再补一些其他的中间件的使用。中间件都是方便我们日常开发的，好用的中间件还是很有必要了解一下。

## 相关文章推荐

* [React状态管理 - Redux&React-redux使用详解教程](https://www.levenx.com/article/725712925991#heading-0)
* [redux tookit - rtk query的简单使用
  ](https://www.levenx.com/article/how-to-use-redux-tookit)


在Redux中，中间件是对dispatch函数进行扩展的一种方式，用来处理action和store之间的通信和交互。中间件的作用可以分为两类：一类是应用领域逻辑相关的中间件，一类是通用的、与应用领域逻辑无关的中间件。Redux需要中间件的原因是：通过中间件可以实现action和store之间的断点，方便地对action进行拦截和处理，在action到达reducer之前，执行某些额外操作（如日

Redux进阶 - Redux中间件使用（redux-thunk,redux-logger)

## 一、组件间传值方案（组件间通信）

**了解 React 的朋友应该都知道React是状态数据驱动的框架。React组件组件之间传值有很多种情况，但是组件之间传值只有通过props，context，回调函数 来实现（不借助外部类库）。**

- 父组件传值给自组件 （ props属性 ）
- 自组件传值给父组件  （ 回调函数 ）
- 兄弟组件传值 （需要传递的值传给 共有的父组件，然后兄弟组件通过props从父组件获取传递值）

**上面是一些最常用的情况，但是如果在大型项目中，组件嵌套四五层层甚至更多，这时候有个需求说把第4层的一个值传给另一个关系甚远的堂兄组件，怎么搞？如果一层层的向上传值找到公共的祖先组件然后再通过props一层层的传？**

**这个时候如果有一个仓库能够帮我们管理这些状态，组件直接的修改值，获取值直接通过这个仓库来统一管理，再也不用像上面一层层的传值，是不是很爽？**

## 二、状态集中管理仓库 Redux

![在这里插入图片描述](https://cdn.portal.levenx.com/levenx-world/49b14a19c81d4bc9ac3d9a4ab78083ac.watermark,type_zmfuz3pozw5nagvpdgk,shadow_10,text_ahr0chm6ly9ibg9nlmnzzg4ubmv0l20wxzm3odkwmjg5,size_16,color_ffffff,t_70)
根据redux的工作流程画了个简单的流程图。接下来我们根据流程图来说下redux数据流是怎么流转的。

- **store**  数据仓库
- **reducer** 仓库管理员
- **action** 修改数据的信号
- **view component** 项目所有的组件

##### 1.工作流程

首先我们需要创建一个仓库**store**，仓库里面可以存放组件们需要的数据**state**。

**store**仓库创建需要招聘处理外部动作信号的仓库管理员**reducer**。

**reducer** 管理员由 **store** 直接管理，**reducer** 管理员通过**action** 动作传递的信号的type来做相应的提前预定好的动作来管理**store**中的数据。

**action** 信号由数据用户**view component** 来触发，通过**store** 提供的联系方式 **store.dispatch()** 来发送**action**。

**view component** 可以通过store.getState()来获取仓库的所有数据，从而来提取自己需要的数据。
如果**view component** 希望**store**中的数据有改动的时候就通知自己，那么就需要订阅**subscribe** 仓库**store**,也就是在仓库的通知列表里面填一下联系方式，当仓库数据修改的时候，仓库会给订阅过的**view comonent**发送最新的数据。

##### 2.代码实践

接下来我将写代码模拟父母挣钱，孩子索要零花钱来改变家庭资金的过程。
![在这里插入图片描述](https://cdn.portal.levenx.com/levenx-world/30f40aeda30148038a9fce1d8e904159.gif)

1. 创建React项目（create-react-app)

```javascript
    create-react-app redux-demo 
    //脚手架安装 npm install -g create-react-app 
```

2. 创建store文件夹
   ![在这里插入图片描述](https://cdn.portal.levenx.com/levenx-world/4ac28fc4a2f1493d9e343db281ddb08c.watermark,type_zmfuz3pozw5nagvpdgk,shadow_10,text_ahr0chm6ly9ibg9nlmnzzg4ubmv0l20wxzm3odkwmjg5,size_16,color_ffffff,t_70)
3. 初始化 store 仓库

```javascript
//store.js
import { createStore} from 'redux';
import reducer from './reducer'

//初始化工厂数据 state
const initState = { money: 0 };

//创建store工厂
const store = createStore(
    reducer,
    initState,
);

export default store;
```

4. store初始化需要reducer管理员

```javascript
//reducer.js
//仓库管理员，接受action发送的信号，处理返回结果数据
const reducer = (state = {}, action) => {
    let newState;
    switch (action.type) {
        case 'SAVA_MONEY'://挣钱
            newState = Object.assign({}, state);
            newState.money += action.payload
            return newState;
        case "OUT_MONEY"://取钱
            newState = Object.assign({}, state);
            newState.money -= action.payload
            return newState;
    }
    return state;
}
export default reducer;
```

5. 组件获取仓库中的数据state

```javascript
//Family.jsx
import React, { Component } from 'react';
import store from './store/store';
import { saveMoney, outMoney } from './store/action'

class Couple extends Component {

    constructor(props) {
        super(props);
        this.state = store.getState()
        store.subscribe(() => {
            let newState = store.getState();
            //重新触发render,从而通过store.getState()获取到新值
            this.setState(newState);
        })
    }

    render() {
        const { money } = this.state;
        return (
            <div>
                <p>Family Money:{money}</p>
                Couple:
                <button onClick={() => {
                    const saveMoneyAction = saveMoney(100)
                    store.dispatch(saveMoneyAction)
                }}>赚钱</button>
                <hr />
                {this.props.children}
            </div>
        );
    }
}

class Child extends Component {

    componentDidMount() {
        store.subscribe(() => {
            this.setState({})
        })
    }

    render() {
        const state = store.getState();
        return (
            <div>
                <p>Family Money: {state.money}</p>
                Child:
                <button onClick={() => {
                    const say = outMoney(20)
                    store.dispatch(say)
                }}>索要零花钱</button>
            </div>
        )
    }
}


export { Couple, Child };
```

```javascript
//action.js
export const saveMoney = (money) => {
    return {
        type: 'SAVA_MONEY',
        payload: money
    }
}

export const outMoney = (money) => {
    return {
        type: 'OUT_MONEY',
        payload: money
    }
}

```

## 三、react-redux

按照上面redux的使用流程，每个组件都需要通过store.getState获取state值，而且都需要订阅等等，真正项目中如果直接这么使用会代码冗余，不方便维护。    

通过react-redux可以很好的简化上面的过程。

```javascript
import React, { Component } from 'react';
import { saveMoney, outMoney } from './store/action';
import { connect } from 'react-redux'

class Couple extends Component {

    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        const { money, saveMoney } = this.props;
        debugger
        return (
            <div>
                <p>Family Money:{money}</p>
                Couple:
                <button onClick={() => {
                    const saveMoneyAction = saveMoney(100)
                }}>赚钱</button>
                <hr />
                {this.props.children}
            </div>
        );
    }
}

class Child extends Component {


    render() {
        const { money, outMoney } = this.props;
        return (
            <div>
                <p>Family Money: {money}</p>
                Child:
                <button onClick={() => {
                    const say = outMoney(20)
                }}>索要零花钱</button>
            </div>
        )
    }
}
//将store中的state数据映射到组件的props中
const mpStateToProps = (state) => {
    debugger
    return {
        money: state.money
    }
}

//将store中方法映射到组件到props中
const mpDisptchToProps = (dispatch) => {
    return {
        saveMoney: (money) => { dispatch(saveMoney(money)) },
        outMoney: (money) => { dispatch(outMoney(money)) }
    }
}

const MyCouple = connect(mpStateToProps, mpDisptchToProps)(Couple);
const MyChild = connect(mpStateToProps, mpDisptchToProps)(Child);

export {
    MyCouple,
    MyChild
};
```

**项目入口 index.js**

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import { MyCouple, MyChild } from './Family'
import store from './store/store'

const App =
  <Provider store={store}>
    <MyCouple>
      <MyChild />
      <MyChild />
    </MyCouple>
  </Provider>

ReactDOM.render(
  App,
  document.getElementById('root')
);

```

## 四、 Redux DevTools 插件

**Chrome浏览器**插件方便开发追溯redux状态的扭转记录。
![在这里插入图片描述](https://cdn.portal.levenx.com/levenx-world/654607780f3c464c81b80c3b5f55fabe.watermark,type_zmfuz3pozw5nagvpdgk,shadow_10,text_ahr0chm6ly9ibg9nlmnzzg4ubmv0l20wxzm3odkwmjg5,size_16,color_ffffff,t_70)

```javascript
//创建store工厂
const store = createStore(
    reducer,
    initState,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
);
```

---

> 附加redux的三大原则(加深理解redux的好处和对付面试 ^ _ ^)
> （1）单一数据源：整个应用的state被存储在一棵object tree中，并且这个object tree只存在于唯一一个store中；
> （2）state是只读的：唯一改变state的方法就是触发action，action是一个用于描述发生事件的普通对象；
> （3）使用纯函数修改数据；


React状态管理 - Redux&React-redux使用详解教程。一、组件间传值方案（组件间通信）了解React的朋友应该都知道React是状态数据驱动的框架。React组件组件之间传值有很多种情况，但是组件之间传值只有通过props，context，回调函数来实现（不借助外部类库）。父组件传值给自组件（props属性）自组件传值给父组件（回调函数）兄弟组件传值（需要传递的值传给共有的父组件

React状态管理 - Redux&React-redux使用详解教程

## RTK Query 清除缓存

> 使用RTK Query的应该知道它有自己的一套缓存策略
>
> RTK Query 的一个关键特性是它对缓存数据的管理。当从服务器获取数据时，RTK Query 将在 Redux 存储中以“缓存”的形式存储数据。当对相同数据执行附加请求时，RTK Query 将提供现有的缓存数据，而不是向服务器发送附加请求。

下面提供一些清除缓存的方法

#### refetchOnMountOrArgChange

接受布尔值或数字作为时间（以秒为单位）

* 传false（默认是false），将会根据缓存策略进行缓存
* 传 true， 当组件挂载或者参数更改时，会重新获取数据
* 传递number时：如果缓存中存在现有查询，它将比较当前时间与该查询最后完成的时间，如果提供的时间过去了，将重新获取，如果没有过去，将提供现有的缓存数据

```ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import type { Post } from './types'

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  // global configuration for the api
  refetchOnMountOrArgChange: 30,
  endpoints: (builder) => ({
    getPosts: builder.query<Post[], number>({
      query: () => `posts`,
    }),
  }),
})
```

```tsx
import { useGetPostsQuery } from './api'

const Component = () => {
  const { data } = useGetPostsQuery(
    { count: 5 },
    // this overrules the api definition setting,
    // forcing the query to always fetch when this component is mounted
    { refetchOnMountOrArgChange: true }
  )

  return <div>...</div>
}
```

#### 使用 cache tag

> 这个也是比较常用到的一个清除缓存的方法
>
> 我们经常会比如在创建某个item时 需要更新列表数据 这个时候就可以用到 cache tag了

主要做两件事

* 给需要清除缓存的query API提供tag
* 在对应mutation接口请求成功后失效tag

```ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
import type { Post, User } from './types'

const api = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: '/',
  }),
  tagTypes: ['Post', 'User'],
  endpoints: (build) => ({
    getPosts: build.query<Post[], void>({
      query: () => '/posts',
      providesTags: (result, error, arg) =>
        result
          ? [...result.map(({ id }) => ({ type: 'Post' as const, id })), 'Post']
          : ['Post'],
    }),
    getUsers: build.query<User[], void>({
      query: () => '/users',
      providesTags: ['User'],
    }),
    addPost: build.mutation<Post, Omit<Post, 'id'>>({
      query: (body) => ({
        url: 'post',
        method: 'POST',
        body,
      }),
      // 总是使与全局 tag 'Post' 相关的缓存失效 无法针对具体的 Post 进行精确的缓存失效。
      invalidatesTags: ['Post'],
    }),
    editPost: build.mutation<Post, Partial<Post> & Pick<Post, 'id'>>({
      query: (body) => ({
        url: `post/${body.id}`,
        method: 'POST',
        body,
      }),
      // 能够根据 mutation 的执行结果动态生成与 Post 相关的 tag，并使这些 tag 失效， 更加灵活和精确
      invalidatesTags: (result, error, arg) => [{ type: 'Post', id: arg.id }],
    }),
  }),
})
```

#### refetchOnFocus

> 控制RTK 查询在应用程序窗口重新获得焦点后是否尝试重新获取所有订阅的查询
>
> 如果在 skip: true 旁边指定此选项，则直到 skip 为 false 时才计算此值。

```ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import type { Post } from './types'

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  // global configuration for the api
  refetchOnReconnect: true,
  endpoints: (builder) => ({
    getPosts: builder.query<Post[], number>({
      query: () => `posts`,
    }),
  }),
})
```

```ts
import { configureStore } from '@reduxjs/toolkit'
import { setupListeners } from '@reduxjs/toolkit/query'
import { api } from './services/api'

export const store = configureStore({
  reducer: {
    [api.reducerPath]: api.reducer,
  },
  middleware: (gDM) => gDM().concat(api.middleware),
})

// enable listener behavior for the store
setupListeners(store.dispatch)

export type RootState = ReturnType<typeof store.getState>
```

#### refetchOnReconnect

> 控制 RTK Query 在重新获得网络连接之后是否尝试重新获取所有订阅的查询
>
> 用法及注意事项与上相同


使用RTK Query的应该知道它有自己的一套缓存策略

RTK Query 的一个关键特性是它对缓存数据的管理。当从服务器获取数据时，RTK Query 将在 Redux 存储中以“缓存”的形式存储数据。当对相同数据执行附加请求时，RTK Query 将提供现有的缓存数据，而不是向服务器发送附加请求。

RTK Query 清除缓存

## redux tookit - rtk query

官网：[https://redux-toolkit.js.org/rtk-query/overview]()

> `rtk query` 是 `@reduxjs/toolkit` 包中的的一个可选插件，其体系结构在内部使用redux。`rtk query` 是一个强大的数据获取和缓存工具，**RTK Query** 是一个强大的数据获取和缓存工具。它旨在简化在 Web 应用程序中加载数据的常见情况，**无需自己手动编写数据获取和缓存逻辑**。极大简化代码。

#### RTK Query 包含以下API:

* createApi
  > RTK query功能的核心。允许定义一组endpoints来描述如何从一系列endpoints检索数据，包括如何获取和转换该数据的配置。经验法则：每个基本URL使用一个API slice。
  >
* fetchbasQuery
  > fetch 的一个小包装，旨在简化请求。
  >
* > 可以作为 Provider 使用如果你还没有redux store
  >
* setupListeners
  > 用于启用 refetchOnMount 和 refetchOnReconconnect 行为的实用程序
  >

接下来我将介绍一下该工具的简单使用

#### 引用 `（可通过以下两种方式获得）`

```ts
import { createApi } from '@reduxjs/toolkit/query'

/* React-specific entry point that automatically generates
   hooks corresponding to the defined endpoints */
import { createApi } from '@reduxjs/toolkit/query/react'
```

#### 定义API slice

```ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import type { Pokemon } from './types'

// Define a service using a base URL and expected endpoints
export const pokemonApi = createApi({
// 作为唯一key挂载到store
  reducerPath: 'rootApi', 
// 所有请求都以 https://fakeApi 这个开头
  baseQuery: fetchBaseQuery({ baseUrl: 'https://fakeApi' }), 
// 代表对该服务器的操作和请求
  endpoints: (builder) => ({
// builder.query<resType, reqParamType>， build.query 一般用于 GET 请求
// builder.mutation一般用于会改变数据库数据请求 比如POST请求
    getPokemonByName: builder.query<Pokemon, string>({
      query: (name) => `pokemon/${name}`,
    }),
    updatePokemon: builder.mutation<void, Pokemon>({
      query: ({id, ...pathch}) => {
        url: `pokemon/${name}`,
        method: 'POST',
        body: patch
        },
    }),
  }),
})

// 为 `getPokemonByName` Query endpoint 导出自动生成的 hooks
export const { useGetPokemonByNameQuery, useUpdatePokemonMutation } = pokemonApi
```

我一般会拆分开来使用，因为项目中接口请求不止一个，可以把定义API slice 放在一个文件，请求可以通过 `injectEndpoints` 把需要的请求放入。

roote-api.ts

```ts
import {createApi, fetchBaseQuery} from '@reduxjs/toolkit/query/react';

// Define a service using a base URL and expected endpoints
const rootApi = createApi({
  // 作为唯一key挂载到store
  reducerPath: 'rootApi',
  // 所有请求都以 https://fakeApi 这个开头
  baseQuery: fetchBaseQuery({ baseUrl: 'https://fakeApi' }), 
  // 代表对该服务器的操作和请求
  endpoints: () => ({}),
});

export default rootApi;
```

features/api/pokemon-api.js

```ts
import rootApi from '@/store/root-api';

const pokemonApi = rootApi.injectEndpoints({
  endpoints: builder => ({
    // builder.query<resType, reqParamType>， build.query 一般用于 GET 请求
    // builder.mutation一般用于会改变数据库数据请求 比如POST请求
    getPokemonByName: builder.query<Pokemon, string>({
      query: (name) => `pokemon/${name}`,
    }),
    updatePokemon: builder.mutation<void, Pokemon>({
      query: ({id, ...pathch}) => {
        url: `pokemon/${name}`,
        method: 'POST',
        body: patch
        },
    }),
  }),
});

export const { useGetPokemonByNameQuery, useUpdatePokemonMutation } = pokemonApi
```

#### 配置store

> API slice 还包含一个自动生成的Redux slice reducer （rootApi.reducer） 和一个自定义中间件（rootApi.middleware），这里的rootApi是我上面定义的 API slice

store.js

```ts
import postsReducer from '../features/posts/postsSlice'
import usersReducer from '../features/users/usersSlice'
import notificationsReducer from '../features/notifications/notificationsSlice'
import { apiSlice } from '../features/api/apiSlice'

export default configureStore({
  reducer: {
    posts: postsReducer,
    users: usersReducer,
    notifications: notificationsReducer,
    [routApiSlice.reducerPath]: rootApi.reducer
  },
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware().concat(rootApi.middleware)
})
```

#### 在组件中使用hooks

每个生成的query hooks 都会返回一个包含多个字段的对象，包括：

* data： 来自服务器的实际响应内容，收到响应之前，该字段将是 `undefined`
* isLoading: boolean类型, 代笔此hooks当前是否正在向服务器发出**第一次**请求。（注意：如果参数更改以请求不同的数据，isLoading将保持为false)
* isFetching: boolean类型，此hooks当前是否正在向服务器发出任何请求。
* isSuccess: boolean类型, 此hooks 是否已成功请求并有可用的缓存数据
* isError: boolean类型, 指最后一个请求是否有错误
* error: 一个 serialized 错误对象

```tsx
import * as React from 'react'
import { useGetPokemonByNameQuery, useUpdatePokemonMutation } from './features/api/pokemon-api'

export default function App() {
  // Using a query hook automatically fetches data and returns query values
  const { data, error, isLoading } = useGetPokemonByNameQuery('bulbasaur')
  // Individual hooks are also accessible under the generated endpoints:
  // const { data, error, isLoading } = pokemonApi.endpoints.getPokemonByName.useQuery('bulbasaur')
  const [trigger, { data, error, isLoading }] = useUpdatePokemonMutation()

  const updatePokenmon = (data) => {
    trigger(data);
  }

  // render UI based on data and loading state
}
```


`rtk query` 是 `@reduxjs/toolkit` 包中的的一个可选插件，其体系结构在内部使用redux。`rtk query` 是一个强大的数据获取和缓存工具，**RTK Query** 是一个强大的数据获取和缓存工具。它旨在简化在 Web 应用程序中加载数据的常见情况，**无需自己手动编写数据获取和缓存逻辑**。极大简化代码。

redux tookit - rtk query的简单使用

## 前言

> Redux 的诟病是重复的模块代码太多，各路大佬都开始尝试解决这些问题，Redux-actions 悄然而生。
>
> 刚开始使用 Redux-actions 时遇到一些问题，那么专门写一篇博客全面详细的记录 Redux-actions 的使用。

### 安装

```javascript
npm install redux-actions
```

```javascript
// index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux';
import { store } from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root'),
);

```

```javascript
// App.jsx

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actions from './action';
import './App.css';

function App(props) {
  console.log('!! props 📢：', props);
  return (
    <div className="action">
      <button
        onClick={() => {
          props.normalAction('测试');
          props.normalAction('测试');
        }}
      >
        测试Action
      </button>
    </div>
  );
}

export default connect(
  (state) => state,
  (dispatch) => {
    return {
      ...bindActionCreators(actions, dispatch),
    };
  },
)(App);
```

> 🏁 如果不熟悉 bindActionCreators 的用法可以参考我前面记录的 [bindActionCreators &amp; combineReducers 使用记录](https://blog.csdn.net/m0_37890289/article/details/110493826)
>
> **action 文件**
>
> ```javascript
> import { createAction, createActions } from 'redux-actions';
>
> // 通常 action 方式定义
> export const normalAction = (params) => {
>   return {
>     type: 'ACTIONS',
>     payload: params,
>   };
> };
> ```
>
> ```javascript
> import { createStore } from 'redux';
>
> const reducer = (state, action) => {
>   switch (action.type) {
>   case 'ACTIONS':
>       return { ...state, ACTIONS: action.payload };    
>     default:
>       return state;
>   }
> };
>
> const store = createStore(reducer, {});
>
> export { store };
> ```
>
> * #### **createAction**
>
>
>   ```javascript
>   // 参数列表
>   createAction(
>     type, 
>     payloadCreator = Identity,
>     ?metaCreator
>   )
>   ```
>
>   ```javascript
>   import { createAction, createActions } from 'redux-actions';
>
>   export const normalAction = (params) => {
>     return {
>       type: 'ACTIONS',
>       payload: params,
>     };
>   };
>
>   export const specialAction = createAction(
>     'ACTIONS',
>     (params) => {
>       return params;
>     },
>     (meta) => {
>       return { admin: true };
>     },
>   );
>
>   console.log('normalAction', normalAction('levenx'));
>   console.log('specialAction', specialAction('levenx'));
>   ```
>
>   ```javascript
>   // 参数列表
>   createActions(
>     actionMap,
>     ?...identityActions,
>     ?options
>   )
>   ```
>
>   ```javascript
>   import { createActions } from 'redux-actions';
>
>   // 同时生成多个 action 方法,并集合到一个对象中，
>   // !!🏁 但是这种方式生成的action不能通过 bindActionCreators 方法来绑定
>   // 具体问题分析与解决方案可以参考 https://blog.csdn.net/m0_37890289/article/details/110493826
>   // 文末贴出问题解决代码
>   export const specialActions = createActions({
>       //只考虑 payload
>     ACTION1: (params) => {
>       return params;
>     },
>     // 处理meta
>     ACTION2: [
>       (params) => {
>         return params;
>       },
>       (meta) => {
>         return { meta };
>       },
>     ],
>     ACTION3: (params) => {
>       return params;
>     },
>   });
>   console.log('specialActions', specialActions);
>   ```
>
>   ```javascript
>   export const specialActions = createActions({
>     //增加层级，拓展命名空间
>     APP: {
>       ACTION1: (params) => {
>         return params;
>       },
>       ACTION3: (params) => {
>         return params;
>       },
>     },
>     MY: {
>       ACTION1: (params) => {
>         return params;
>       },
>       ACTION3: (params) => {
>         return params;
>       },
>     },
>   });
>   ```
>
>   ```javascript
>   // 参数列表
>   createAction(
>     type, 
>     payloadCreator = Identity,
>     ?metaCreator
>   )
>   ```
>
>   ```javascript
>   import { createStore } from 'redux';
>   import { handleAction } from 'redux-actions';
>
>   // 正常使用方式
>   const specialReducer = handleAction(
>     'ACTIONS',
>     (state, { type, payload, meta }) => {
>       debugger;
>       return { payload };
>     },
>     { init: 'levenx' },
>   );
>
>   // 处理 action 错误情况使用这种方式
>   const specialReducer = handleAction(
>     'ACTIONS',
>     {
>       next(state, action) {
>         return { payload };
>       },
>       throw(state, action) {
>        return { error };
>       },
>     },
>     { init: 'levenx' },
>   );
>
>
>   // console.log('📢 specialReducer', specialReducer);
>
>   const store = createStore(specialReducer, {});
>
>   export { store };
>
>   ```
>
>   ```javascript
>   // 参数列表
>   handleActions( reducerMap, defaultState);
>   ```
>
>   ```javascript
>   import { handleActions } from 'redux-actions';
>
>   const specialReducer = handleActions(
>     {
>       ACTION1: (state, action) => {
>         return { levenx: '1' };
>       },
>       ACTIONS2: {
>         next(state, action) {
>           return { levenx: '1' };
>         },
>         throw(state, action) {
>           return { levenx: '1' };
>         },
>       },
>     },
>     { INIT_DATA: 'levenx' },
>   );
>   ```
>
>   ```javascript
>   // 参数列表
>   combineActions(...types);
>   ```
>
>   ```javascript
>   const { action1, action3 } = createActions({
>     ACTION1: (params) => {
>       return params;
>     },
>     ACTION3: (params) => {
>       return params;
>     },
>   });
>   export { action1, action3 };
>   ```
>
>   ```javascript
>   import { handleActions, combineActions } from 'redux-actions';
>   import { action1, action3 } from './action';
>
>   const specialReducer = handleActions(
>     {
>        // action1, action3 都触发该方法
>       [combineActions(action1, action3)]: (state, action) => {
>         return { action };
>       },
>     },
>     {}
>   );
>   ```
>
>   ```javascript
>   // bindActionCreatorsPlus.js
>   import { bindActionCreators } from 'redux';
>
>   export default function bindActionCreatorsPlus(actions, dispatch) {
>     if (typeof actions !== 'object' || !actions) {
>       throw new Error('invalid actions');
>     }
>
>     let result = {};
>     for (let key in actions) {
>       if (actions.hasOwnProperty(key)) {
>         const creator = actions[key];
>         if (typeof creator === 'object' && creator) {
>           //递归执行
>           result[key] = bindActionCreatorsPlus(creator, dispatch);
>         } else if (typeof creator === 'function') {
>           result[key] = bindActionCreators(creator, dispatch);
>         }
>       }
>     }
>     return result;
>   }
>   ```
>
>   ```javascript
>   import React, { Component } from 'react';
>   import { connect } from 'react-redux';
>   import bindActionCreatorsPlus from './bindActionCreatorsPlus';
>   import * as actions from './action';
>
>   function App(props) {
>     console.log('!! props 📢：', props);
>     return (
>       <div className="action">
>       </div>
>     );
>   }
>
>   export default connect(
>     (state) => state,
>     (dispatch) => {
>       return {
>         //使用自定义的  bindActionCreatorsPlus方法处理action
>         ...bindActionCreatorsPlus(actions.actions, dispatch),
>       };
>     },
>   )(App);
>
>   ```
>
>   ```javascript
>   export const actions = createActions({
>     App: {
>       ACTION1: (params) => {
>         return params;
>       },
>       ACTION3: (params) => {
>         debugger;
>         return params;
>       },
>     },
>   });
>   ```
>
>   *
>   *
>   * ## 参考
>
>   ## Redux相关文章推荐
>
>   ### 嵌套 action 绑定组件方案
>
>   * # combineActions
>   * #### handleActions
>   * #### handleAction
>   * #### createActions
>
> ## 方法列表
>
>> 后续介绍 redux-actions 方法会修改对应的 action 和 reducer 文件。
>>
>
> **reducer 与 store**

**App 组件**

**入口**

## DEMO项目结构


前言Redux的诟病是重复的模块代码太多，各路大佬都开始尝试解决这些问题，Redux-actions悄然而生。刚开始使用Redux-actions时遇到一些问题，那么专门写一篇博客全面详细的记录Redux-actions的使用。安装npminstallredux-actions//index.jsximportReactfrom&#39;react&#39;;importReactDOMfrom&

Redux-actions 使用方法

Git是一个由林纳斯·托瓦兹为了更好地管理linux内核开发而创立的分布式版本控制／软件配置管理软件。需要注意的是和GNU Interactive Tools，一个类似Norton Commander界面的文件管理器相区分。



C 语言，是一种通用的、过程式的编程语言，广泛用于系统与应用软件的开发。具有高效、灵活、功能丰富、表达力强和较高的移植性等特点，在程序员中备受青睐。

C 语言是由 UNIX 的研制者丹尼斯·里奇（Dennis Ritchie）和肯·汤普逊（Ken Thompson）于 1970 年研制出的B语言的基础上发展和完善起来的。目前，C 语言编译器普遍存在于各种不同的操作系统中，例如 UNIX、MS-D

C语言

C++ 是一种通用的、静态类型的编程语言，它具有高效性、灵活性和可移植性等特点。C++ 基于 C 语言，同时支持面向对象编程和泛型编程，可以用于开发各种类型的应用程序，如系统软件、游戏、桌面应用程序、移动应用程序等。

C++ 的主要特点包括：

高效性：C++ 是一种编译型语言，可以生成高效的本地代码，在性能要求高的应用程序中得到广泛应用；
面向对象编程：C++ 支持面向对象编程，包括封装、继承

React 是一个由 Facebook 开发的流行的 JavaScript 库，用于构建交互式用户界面。它采用了一种基于组件化的开发模式，使得开发人员可以将 UI 拆分为独立的、可复用的组件，并由这些组件构建复杂的用户界面。

React 的主要特点包括：

组件化开发：React 将 UI 拆分为独立的、可复用的组件，开发人员可以将这些组件组合在一起构建复杂的用户界面；
虚拟 DOM：React

React

Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提

JavaScript 是一种基于脚本的编程语言，主要用于在 Web 页面上实现交互式的效果和动态的内容。JavaScript 是一种解释性语言，不需要编译就可以直接在浏览器中运行。

JavaScript 的主要特点包括：

轻量级：JavaScript 代码通常比较短小，可以快速加载和执行。

可移植性：JavaScript 可以在各种不同的浏览器和操作系统上运行。

面向对象编程：JavaSc

JavaScript

Cypress 是一个前端自动化测试工具，用于测试基于Web的应用程序。它能够测试运行在浏览器中的应用，并且适用于单元测试、集成测试和端到端（E2E）测试。Cypress 提供了一个丰富的API集，以及一个友好的交互式界面，让开发和测试人员能够轻松编写、运行和调试测试用例。

Cypress

ORM（Object-Relational Mapping，对象关系映射）是编程中的一个概念，它指的是一种技术手段，可以将不兼容的类型系统转换为面向对象模型。换句话说，ORM 允许开发者在编程语言中使用对象的方式来操作数据库中的数据。

Linux 是一个广泛使用的开源操作系统内核，由林纳斯·托瓦兹（Linus Torvalds）于1991年创建。它是 Unix-like 操作系统的一个重要分支，并且它的设计和实现遵循了模块化的设计原则。Linux 内核本身可以与不同的用户空间组件配合，形成完整的操作系统。这些完整的系统被称为 Linux 发行版，例如 Ubuntu、Fedora、Debian、CentOS 和 Arch Linu

Linux

Vue.js（简称 Vue）是一种开源的轻量级 JavaScript 框架，由 Evan You 于2014年首次发布。Vue 致力于在用户界面（UI）开发中实现数据与视图的双向绑定，为创建现代化 Web 应用、单页面应用（SPA）以及多种复杂界面提供了一种简洁、高效且可扩展的解决方案。

#### 核心特性

- **组件化：** Vue 包含了独立的、可复用的组件，有助于将 UI 切成逻辑部分

Docker 是一个开源的容器化平台，允许开发者打包应用及其全部依赖到一个可移植的容器中，然后这个容器可以在任何机器上运行，确保应用在不同环境之间运行的一致性。Docker 使用了 Linux 容器（LXC）的技术，但进行了扩展，使其更为易用、功能更全面。

Docker

Rust是一种系统编程语言，由Mozilla Research开发。它是一种安全、并发和高效的语言，旨在为开发人员提供更好的内存安全和线程安全，同时保持高性能和可扩展性。

Rust的设计具有以下特点：

内存安全：Rust在编译时执行内存安全检查，防止常见的内存错误，例如使用空指针或释放不再使用的内存。

并发性：Rust具有一种称为"无等待"（lock-free）的并发模型，它可以确保线程安全

Rust

MySQL 是一款流行的关系型数据库管理系统（RDBMS）。它负责存储、检索和管理结构化数据，尤其是以表格形式存储的数据。MySQL 使用 SQL（Structured Query Language，结构化查询语言）作为查询和操作数据的接口，并遵循许多 SQL 标准。它是一种兼具性能、可靠性和易用性的数据库系统，适用于各种应用场景，从个人项目到大型企业应用。

MySQL

JavaScript 的升级版 TypeScript 已日益成为开发世界全新的演变里程碑。立足于 JavaScript 的优雅灵活与 TypeScript 的强类型体系，本教程旨在助您铸就极致的开发力量。

我们的 TypeScript 系列教程将自始至终地引导你掌握 TypeScript 的各种方面，与您一起，宏观理解 JavaScript 世界、深入钻研 TypeScript 规则与逻辑，探索

TypeScript

Mongoose 是一个面向 MongoDB 数据库的对象数据模型（ODM）库，用于在 Node.js 环境下建模和操作 MongoDB 文档结构。它提供了一些方便的特性，如数据验证、查询构建、业务逻辑钩子（hooks）和中间件，使得处理 MongoDB 文档更加直观和安全。


Mongoose

Tailwind CSS 是一个非常强大且受欢迎的实用型 CSS 框架，于2017年由.Adam Wathan、Jonathan Reinink、David Hemphill 和 Steve Schoger 共同创立。 这个框架的主要目标是帮助开发者快速构建定制化的用户界面，而无需从头开始编写 CSS 代码。
Tailwind 提供了一整套预先定义好的类名，代表 CSS 的各种属性，如颜色、字体大

Tailwind CSS

Elasticsearch（常写作 Elasticsearch）是基于 Lucene 的分布式搜索与分析引擎，面向海量数据提供近实时（NRT）的全文检索、结构化查询与聚合分析能力。它以 JSON 文档为核心数据模型，通过 索引（index）—分片（shard）—副本（replica） 的机制实现横向扩展与高可用：数据被切分到多个分片分布在不同节点上，副本用于容灾与提升读取吞吐。Elasticsea

ElasticSearch

Go，也称为 Golang，是一种开源的编程语言，由 Google 开发。Go 是一种静态类型、编译型、并发型的语言，它被设计为一种简单、快速、可靠和高效的语言。Go 语言的语法类似于 C 语言，但也借鉴了其他语言的一些特性，如 Python 和 Java。

Go 语言的设计目标是提供一种简单、易于学习和使用的语言，同时具有高效的执行速度和并发处理能力。Go 语言的主要特点包括：

1. 并发支

Golang

CSS（Cascading Style Sheets）是一种用于描述文档样式和布局的样式表语言，常用于 Web 开发中。它通过定义样式规则来控制 HTML 元素的外观和布局，使得开发人员可以更加灵活地控制页面的样式和排版。

CSS 的主要特点包括：

分离样式和内容：CSS 可以将样式信息从 HTML 内容中分离出来，使得样式和内容的管理更加清晰和易于维护；
层叠样式：CSS 中的样式规则是可以

Network（网络）是指连接在一起的计算机、设备和其他物体，它们可以彼此通信和交换信息。网络可以分为局域网（LAN）、广域网（WAN）、互联网（Internet）等不同的类型和层次，它们在不同的范围和层次上提供了不同的服务和功能。

网络的主要特点包括：

连通性：网络可以将不同的计算机、设备和应用程序连接在一起，实现彼此之间的通信和数据交换。

分布式：网络中的计算机和设备分布在不同的地理位置