Redux学习笔记

Redux基础

Redux 是一个管理全局应用状态的库。

为什么需要Redux？
我们将学习前端的过程，类比做书本生意的过程。在刚开始学习HTML/CSS时，我们能搭建出基础的网页，相当于我们现在已经摆好了一个书摊。后面学习了React，相当于我们将书摊上杂乱无章的书，分门别类的放好，开成了一家书店。那后续我们要是想继续扩大规模变成图书馆，怎么管理这些图书呢？我们学习的Redux相当于，给书店安了台电脑，将所有图书的状态统一管理，这就是我们为什么学习Redux。

什么时候需要Redux?
1.用户的使用方式复杂
2.不同用户拥有不同的登陆身份
3.服务器需要大量交互
4.视图层需要从多个来源获取数据

一、环境准备

（1）新建一个React文件，这里将文件命名为learn-redux

npx create-react-app learn-redux

（2）安装redux

npm install redux

二、Redux基础

在我们单纯的使用React创建网页时，在各个组件里都会有很多个状态，非常的零散，如果我们能将状态提取出来放在一起，结构就会变得清晰，这一点Redux就可以帮助我们做到。Redux的操作流程如下，当用户在UI界面进行操作时，Action会通过Dispatch传到Store中，Store里面的Reducer会对状态进行处理，传出新的状态，显示在UI界面上。

Store

应用状态存储在名为store的对象里，store是通过reducer创建的，具有一个getState()方法。

import { createStore } from 'redux'

const store = createStore({ reducer: counterReducer })
console.log(store.getState())

Action

action 是一个具有 type 字段的普通JavaScript 对象，action里面的内容描述了应用程序中发生的事件。

const increment = () => {
  return {
    type: 'INCREMENT'
  }
}

Reducer

reducer 是一个函数，接收当前的 state 和一个 action 对象，必要时决定如何更新状态，并返回新状态。函数签名是：(state, action) => newState。 我们可以将 reducer 视为一个事件监听器，它根据接收到的 action（事件）类型处理事件。

const counter = (state = 0,  action) => {
  switch(action.type){
  		case 'INCREMENT':
  			return state + 1
  	}	
  }
  let store = createStore(counter);

Dispatch

store.dispatch(increment()); 

三、react-redux

redux是为JS准备的，在react中使用还需要下载使用react-redux。

安装：

npm install redux react-redux

Provider

用Provider对APP进行包裹，这样App内的组件就都可以使用store。

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

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

connect

使用connect可以关联组件，比如现在两个组件间要进行信息传递，分别为ComA,ComB。
组件A为发送方，实现mapDispatchToProps参数
组件B为接收方，实现mapStateToProps参数

const ComA = () => {}
const mapDisPatchToProps = (dispatch) =>{
	return {
		sendAction :() => {
			dispatch ({
				type : "add_action"
				})
			}
		}
	};
export default connect(null,mapDispatchToProps)(ComA)

const ComB = () => {}
const mapStateToProps = (state) => {
	return state;
}

export default connect(mapStateToProps)(ComB)

四、redux进阶

1.binActionCreators

在我们用mapDispatchToProps，我们需引用action，那么在页面有很多action时，就会产生麻烦，那么这个时候我们就可以将其打包引用。

import * as countActions from "./action/count"

addClick = () =>{
this.props.countActions.increment()
}

const mapDispatchToProps = (dispatch) => {
	countAction:binActionCreactors(countAction,dispatch);
}

2.传递参数和常量提取

传递参数：

import * as countActions from "./action/count"

addClick = () =>{
this.props.countActions.increment(10)
}

const mapDispatchToProps = (dispatch) => {
	countAction:binActionCreactors(countAction,dispatch);
}

/// action/count.js
increment = (num) =>{
	return (
		type:"ADD",
		num
	)

/// reducer.js
...return state=state+action.num; 

常量提取：
新建一个文件夹，export const INCREMENT="INCREMENT"，这样可以避免在书写过程当中产生的常量书写错误不报错，找不到错误的问题。

3.combineReducers

在我们有多组reducer需要合并时，可以用combineReducers