redux&&react-redux

redux

redux组成部分：state,action,reducer,store
store主要职责：
维持应用的state
提供getState()方法获取state
提供dispatch()方法发送action
通过subscribe()来注册监听
通过subscribe()返回值来注销监听
用法：

• action:必须要有return返回值，返回的是对象{type: ‘xx’, key: value},必须要有type属性

action/index.js组件写action的相关信息
const sendAction = () => { // 名字随意取
	return {
		type: 'send_action', // 名字随意取
		...//剩下的写需要传的参数
		value: '发送爱心~' // 调用时返回的值
	}
}
const stopAction = () => { // 名字随意取
	return {
		type: 'stop_action', // 名字随意取
		...//剩下的写需要传的参数
		value: '停止发送'
	}
}
module.exports = {
	sendAction,
	stopAction,
}

• reducer：可以写个初始值，在这边判断action的type值

reducer/index.js组件
const initState = {
	sendValue: '发射信息',
	stopValue: '停止信息',
} // 定义初始值

const reducer = (state = initState, action) {
	switch(action.type) {
		case: 'send_action':
			return {
				sendValue: action.Value
			}
		case: 'stop_action':
			return {
				stopValue: action.Value
			}
		case: 'add_action':
			retrun {
				// 返回的都是新的state,那我随便取个值吧
				addValue: action.value
			}
		default: 
			return state;
	}
}

const loveReducer = (state = initState, action) {
	switch() {
		...
	}
 }
const ... = (state, action) {}
module.exports = {
	reducer,
	loveReducer,
	...
}

• store: 需要导入reducer

import { legacy_createStore as createStore } from 'redux';

// 导入reducer
import { reducer, xxx } from '../reducer/index.js';

// 构建store
export default createStore(reducer)

• 使用：在需要发送action的页面导入action，store

import React from 'react';
import store from '../../store/index.js';
import { sendAction, stopAction } from '../../action/index.js';

export default class Home extends React.Component {
	handleClick = () => {
		// 发送action方式有两种：1.发送action组件内的
		const action = sendAction()
		store.dispatch(action)
		
		// 2.直接store.dispatch
		store.dispath({
			type: 'add_action', // action的type必传
			// 剩下的可以传值
			value: 'add_action的传值，这个值会在reducer的action里'
		})
	}

	// 当组件加载完成的时候监听，具体用法还需百度
	componentDidMount(){
		store.subscribe(() => {
			// this.setState({});
		})
	}
	render(){
		return (
			<>
				<button onClick="this.handleClick">点击发送action</button>
			</>
		)
	}
}

child组件中使用add_action的value值
获取store里的属性值用store.getState()

import React from 'react';
// 需要引入store
import store from '../../store/index.js';
export default class Child extends React.Commponents {
	render(){
		return (
			<div>
				{ store.getState().addValue }
			</div>
		)
	}
}

react-Redux

react-Redux中两个重要的成员：
1.Provider: 这个组件能够使你整个app都能获取到store中的数据
2.connect: 这个方法能够使组件跟store来进行关联

• Provider：
  Provider包裹在根组件最外层，使所有的子组件都可以拿到State
  Provider接收store作为props，然后通过context往下传递，这样react中任何组件都可以通过context获取到store

• connect：
  connect:Provider内部组件如果想要使用到state中的数据，就必须要connect进行一层包裹封装，换一句话来说就是必须要被connect进行加强
  connect就是方便我们组件能够获取到store中的state

react-redux使用：需要结合redux的reducer,store使用

1. 需要在引入两个子组件的根组件最外层，引入store,绑定store

import React from 'react';
import srore from '../../store/index.js'; // 与上面store/index.js相同
import { Provider } from 'react-redux';
// 引入两个子组件
import ComA from '../xxx/ComA.js';
import ComB from '../xxx/ComB.js';
class Main extends React.Commpont {
	render(){
		return(
			<Provider store={store}>
				<ComA />
				<ComB />
			</Provider>
		)
	}
}

2. 在两个子组件中使用connect,一个发送组件一个接收组件
   connect(接收函数，发送函数)(需要使用connect的组件)

ComA组件：发送action组件
import React from 'react';
// 导入connect
import { connect } from 'react-redux';
class ComA extends React.Commponent{
	addClick = () => {
		// 底下mapDispatchToProps 函数在组件内就是props，用this.props.xxx可以调用具体的action
		this.props.addAction();
	}
	recClick = () => {
		this.props.recAction();
	}
	render() {
		refturn {
			<>
				<button onClick={this.addClick}>+</button>
				<button onClick={this.recClick}>-</button>
			</>
		}
	}
}

const mapDispatchToProps = dispatch => {
	// 接收dispatch参数
	// 必须要有return 返回值，返回对象{}， 键值对形式 key: ()=>回调函数
	return {
		addAction: () => {
			dispath({
				type: 'add_action', // action必须要有type值
				value: '需要传递的值',
			})
		},
		recAction: () => {
			dispath({
				type: 'rec_action', // action必须要有type值
				value: '需要传递的值',
			})
		}
	}
}
// connect需要导出,第一个函数是接收的，这个组件不需要接收置为null，只需要第二个发送函数,名字随便取
export default connect(null, mapDispatchToProps)(ComA)

reducer/index.js组件
const initState = {
	count: 0
}
exports.reducer = (state, action) => {
	switch(action.type){
		case: 'add_action':
			return {
				count: state.count + 1
			}
		case: 'rec_action':
			return {
				count: state.count - 1
			}
	}
}

child组件中接收value:

import React from 'react';

// 导入connect
import { connect } from 'react-redux';

class ComB extends React.Commponent {
	render() {
		return(
			// 在组件内使用this.props获取值
			<div>{ this.props.count }</div>
		)
	}
}

const mapStateToProps = (state) => {
	// 必须要return
	return state
}
// 接收组件只需要第一个接收函数，需要导出
export default connect(mapStateToProps)(ComB)