前端

## 前言

在 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 使用方法

客户端

服务端

算法

工程

产品

信息安全

运维

Redux 是一个流行的 JavaScript 状态管理库，主要用于管理复杂应用的状态。它由 Dan Abramov 和 Andrew Clark 创建，并受到了 Flux 架构的启发。Redux 的核心理念是维护一个单一的全局状态对象，所有的状态变更都通过一种叫做“action”的方式来描述，然后这些 action 会通过“reducer”函数来更新状态。