redux 与 react-redux 实现 React 状态集中管理

2022 年 02 月 06 日

23 次浏览

2635字数

## 下载

```language
npm install redux redux-thunk react-redux
```
```js
 redux            redux 核心库
 redux-thunk      实现异步active
 react-redux      react-redux 核心库
```

## Redux

```Redux``` 核心包括 ```store```、```constant```、```action```

### store

- 引入 ```redux``` 中的 ```createStore``` 函数，创建一个 ```store```

- ```createStore``` 调用时要传入一个为其服务的 ```reducer```

- 记得暴露  ```store``` 对象

```js
// store.js

import { createStore, applyMiddleware, combineReducers } from 'redux'
import thunk from 'redux-thunk'

//汇总所有的reducer变为一个总的reducer
const allReducer = combineReducers({
	oneReducer,
	twoReducer
})

// (allReducer,利用applyMiddleware与redux-thunk实现异步active)
export default createStore(allReducer, applyMiddleware(thunk))  
```

### constant

- ```reducer``` 的本质是一个函数，接收：```oldState``` , ```action``` ，返回加工后的状态
- ```reducer``` 有两个作用：初始化状态，加工状态
- ```reducer``` 被第一次调用时，是 ```store``` 自动触发的，传递的 ```oldState``` 是 ```undefined``` ,传递的 ```action``` 是 ```{type:'@@REDUX/INIT_a.2.b.4}```

```js
// reducer.js

const defaultOldState = 0 // 初始化 state
 
export default (oldState = defaultOldState, actions) => {
  const { type, data } = actions
  switch (type) {
      case 'INCREMENT': 
        return data
      case 'DECREMENT': 
        return data
      default:
        return oldState
  }
}
```
### action

- 用于处理 ```constant``` 所需要 ```actions```

```js
// 异步 active
export const createIncrementAction = data => {  
  return (dispatch) => {
    setTimeout(() => {
      dispatch({
        type: INCREMENT,
        data
      })
    }, 1000)
  }
}

// 同步 active
export const createDecrementAction = data => ({type:DECREMENT,data})
```

## react-redux

### 明确两个概念

- UI组件: 不能使用任何 ```redux``` 的 api，只负责页面的呈现、交互等。
- 容器组件：负责和redux通信，将结果交给UI组件。

### store全局代理

- 使用 ```Provider``` 包裹 ```App``` 根节点
- 使用 ```store``` 全局代理可以省略容器组件的 ```store={store}```

```jsx
import { Provider } from 'react-redux'

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>  {/* store全局代理 */}
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
)
```

### 创建容器组件

- UI组件中可以通过 ```props``` 接收到容器组件所传过来的 ```state/action ```映射

```js
import { connect } from "react-redux";

export default connect(
  // 状态映射 mapStateToProps
  state => ({
    state: state.oneReducer
  }),

// action 映射 mapDispatchToProps
  { 
    createIncrementAction,
    createDecrementAction 
  }
)(Redux) // 组件节点
```

### 使用容器组件

```js
<Redux />
```

## 注意

```constant``` 必须使用纯函数

### 纯函数

- 只要是同样的输入(实参)，必定得到同样的输出(返回)
- 不得改写形参数据
- 不会产生任何副作用，例如网络请求，输入和输出设备
- 不能调用Date.now()或者Math.random()等不纯的方法

最后修改：2022 年 12 月 07 日