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

**了解 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使用详解教程

## 前言

在 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)

## 前言

> 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 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 通关教程

教程简介

文章列表

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

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

Redux-actions 使用方法

redux tookit - rtk query的简单使用