reduxreact-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.dispatchstore.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可以调用具体的actionthis.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) => {// 必须要returnreturn state
}
// 接收组件只需要第一个接收函数，需要导出
export default connect(mapStateToProps)(ComB)