redux的使用 - 技术栈

Redux组成

1. State状态

DomainState：服务器返回的State
UI State：关于当前组件的State
APP State：全局的State

2. Action事件

本质就是一个JS对象
必须包含type属性
只是描述了有事情要发生，并没有描述如何去更新State

3. Reducer

本质就是函数
响应发送过来的action
函数接收两个参数，第一个是初始化state，第二个是发送过来的action
必须要有return返回值

4. Store

用来把action和reducer关联到一起
通过createStore来构建store
通过subscribe来注册监听
通过dispatch来发送action

代码展示

Action

一般会在src下新建一个action文件夹统一管理action对象，方便后续维护和使用

javascript 复制代码

const sendAction = () => {
	return {
		type: "send_type",
		value: "这是一个action"
	}
}

module.exports = {
	sendAction
}

Reducer

一般会在src下新建一个reducer文件夹统一管理reducer函数，方便后续维护和使用

javascript 复制代码

const initState = {
	value: "默认值"
};

const reducer = (state = initState, action) => {
	switch (action.type) {
		case "send_type":
			return Object.assign({}, state, action);
		default:
			return state;
	}
}

module.exports = {
	reducer
};

Store

在src下新建一个store文件夹用于创建store

javascript 复制代码

import { createStore } from "redux";

import { reducer } from "../reducer";

const store = createStore(reducer);

export default store;

触发一个action

通过store.dispatch()来触发

为了能感知State的变化，通过store.subscribe进行监听，通过store.getState()来获取最新的state内容，但是此时并没有进行界面更新，可以通过this.setState({})来进行更新。

案例-Provider和connect的使用

功能结构：

创建一个组件，名字叫ComA，里面放一个button按钮，进行+1操作
创建另一个组件，名字叫ComB，里面放一个div，用来显示数字
在app.js中引入两个组件

代码示例：

ComA

ComB

app.js

使用Provider进行包裹和store传输

reducer处理

connect使用

ComA发送数据：

javascript 复制代码

import React from "react";

// 导入connect
import { connect } from "react-reedux";

class ComA extends React.Component {
	handleClick = () => {
		// 发送action
		this.props.sendAction();
	}
	
	render() {
		return <button onClick={this.handleClick}> + </button>;
	}
}

// 这个函数要有一个返回值，返回值是一个对象
const mapDispatchToProps = (dispatch) => {
	return {
		sendAction: () => {
			// 利用 dispatch 发送一个action
			// 传递action对象，需要定义一个type属性
			dispatch({
				type: "add_action"
			})
		}
	}
};

// ComA是发送方，所以要实现 connect的第二个参数
export default connect(null, mapDispatchToProps)(ComA);

ComB接收数据：

connect参数说明

推荐视频：redux全局状态管理
 react 中的redux 怎么用