redux与react-redux

react工作流程

 

 

## redux下载

 npm i --s redux

 

## 搭配 redux

下载：npm i --s react-redux

 

## redux工作流程

1. createStore 创建仓库 参数是 reducer 和 初始化的状态

let store = createStore(reducer, state);

2. 获取仓库里面的值

　store.getState()

3. 派发事件

store.dispath({type:'',payload:''})
   store.dispath(action)
   aciton = {type:'动作类型',payload:参数}
   dispatch 的参数会传给 reducer 的 action
   也就是这个对象就是 action 对象
() => store.dispatch({ type: "da" })

　

4. 事件订阅 会返回一个取消订阅的函数

　

　let unsubscribe =  store.subscribe(()=>{
   setName(name=>store.getState().name)
　　})
 unsubscribe 取消订阅的函数

 

5. reducer 专门负责管理状态的 在 redux 里面只能通过 reducer 去修改状态

 

function App() {
  let [name, setName] = useState(() => store.getState().name);
  useEffect(() => {
    //订阅一下打王子豪的事件
    let unsubscribe = store.subscribe(() => {
      setName(name => store.getState().name);
    });
    return unsubscribe;
  });
  return (
    <Fragment>
      {name}
      ----
      <button onClick={() => store.dispatch({ type: "da" })}>打他</button>
    </Fragment>
  ); }

 

6.combineReducers 合并 reducer，把状态合并到一个对象里，通过命名区分

合并之后取值，需要 state，当前状态的 reducer

state.appreducer.name

 

7.applyMiddleware 使用中间件

没有 redux-thunk 的话 dispatch 只能派发{}，有了的话可以派发一个参数为 dispatch 的 dispatch 函数

import { applyMiddleware } from "redux";
redux-thunk
import ReducThunk from "redux-thunk";

 

react-redux

总结：react-redux 就是用来配合 redux 进行优雅，方便，简介

 

1.Provider

在项目的根节点，使用 provider 包裹，该组件接收一个必须的属性 store，使用 store 属性接收自定义的 redux 仓库对象

import { connect } from "react-redux";

 

Provider 里封装了 subscribe 订阅函数，这样极大的方便了我们使用 redux

 

 

2.connect(mapStateToProps, mapDispatchToProps, mergeProps)(组件)

mapStateToProps：函数接收整个 Redux store 的 state 作为 props，然后返回一个传入到组件 props 的对象

 

 import { connect } from "react-redux";

 

 

考试总结

## redux

- 一款独立的，单向数据流的全局状态管理器。(状态机)

- 组成部分：reducer、actions、store

 

### 常用 API

 

- store：新数据替换旧数据

 

  1.获取 getState()

 

  2.修改 dispatch()

 

  3.订阅 subscribe()

 

  - 为什么用 subscribe？

 

    因为 react 是单向数据流，不会自动更新

 

``js   dispatch({     type: "业务"   });   ```

 

- redux 解构：

 

  1.createStore 创建仓库

 

  2.applyMiddleware()安装中间件

 

  3.combineReducers() 合并多个 reducer

 

 

### 核心概念

1.reducer：是一个纯函数，只对 state 进行业务操作，不去做和 state 没有关系的事情，同时必须保证都是同步代码，不可以有异步操作

 

2.reducer：里面的 state，一个只读的对象数据，不可以直接修改，因为被 redux 监听保护，每次都是在 reducer 里返回一个新的对象数据，由 redux 去进行新旧数据处理

 

3.数据流：自上而下，单向数据流

 

### reducer

存储数据和实现业务

reducer 必须是一个纯函数，无异步代码，没有与 state 无关的代码

 

- reducer 接收两个参数，一个是 state 状态，一个是 action 对象

- state 是不可以修改的，是只读的，所以返回一个新的 state，store 去修改 state

- action 是 dispatch 传递过来的，通过 type 属性去匹配业务处理

 

## react-redux

总结：react-redux 就是用来配合 redux 进行优雅，方便，简洁开发的

 

## react-redux 的核心组件是什么

1) Provider

2) connect

 

### Provider

在项目的根节点，使用 provider 包裹，该组件接收一个必须的属性 store，使用 store 属性接收自定义的 redux 仓库对象

 

Provider 里封装了 subscribe 订阅函数，这样极大的方便了我们使用 redux

 

### connect

高阶函数

语法：`connect(mapStateToProps,mapDispatchToProps)(组件)`

 

作用：将 store 里的状态和派发动作映射到组件的属性对象上。

 

## redux 工作流程

组件触发 dispatch 函数发送一个 Action 给 store，store 将 State 和 Action 发送给 reducer，reducer 会返回一个新的 State,State 一旦有变化，store 就会调用 subscribe 订阅函数，通过 store.getState()获取新的 State

 

## 如何在 actions 里写异步请求

- 中间件 redux-thunk

 

## 如何解决事件中 event 对象在异步中发生的的问题

 

会导致 event 对象值丢失，e.persist 在异步方法前调用，去掉合成事件保留了原始值

 

## 请写出合并多个 reducers 的示例代码

 

```js
 1.import { createStore, combineReducers } from "redux";
 2.import userReducer from "./reducers/userReducer";
   import homeReducer from "./reducers/homeReducer";
   import newsReducer from "./reducers/newsReducer";
 3.export default createStore(
        combineReducers({
             userReducer,
             homeReducer,
             newsReducer
  }),
          applyMiddleware(thunk) ); ```

 

## connect 接收哪几个参数，请简要描述这几个参数

1) mapStateToProps

2) mapDispatchToProps

 

## redux 在 异步请求中使用什么中间件？

中间件：redux-thunk