网站空间速度快,塑胶材料东莞网站建设,湘潭做网站公司,合肥建设网络网站网站react-redux是react插件 将所有组件分成两大类#xff1a;UI组件和容器组件 安装npm install react-redux -S UI组件#xff1a; 只负责UI的呈现#xff0c;不带有任何业务逻辑不使用this.state所有数据都由this.props提供不使用任何Redux的API#xff0c;不需要使用store … react-redux是react插件 将所有组件分成两大类UI组件和容器组件 安装npm install react-redux -S UI组件 只负责UI的呈现不带有任何业务逻辑不使用this.state所有数据都由this.props提供不使用任何Redux的API不需要使用store 容器组件 负责管理数据和业务逻辑不负责UI的呈现带有内部状态使用Redux的API 组件结构
用容器组件包裹UI组件容器组件负责与外部的通信将数据传给UI组件UI组件渲染出视图connect函数(来自react-redux插件)连接React组件与React store
关键字
connectProvider
App修改为UI组件
index.js
import ReactDOM from react-dom
import App from ./App
import { createStore } from redux
import { counter } from ./redux/reducers
import { Provider } from react-reduxconst store createStore(counter)
ReactDOM.render(Provider store{store}App //Provider,document.getElementById(root)
)App.jsx
import React, { Component, createRef } from react
import { connect } from react-redux
import * as actions from ./redux/action
class App extends Component {constructor(props) {super(props)this.selectRef createRef()}compute (method) {const selectDom this.selectRef.current,selectVal Number(selectDom.value);// 使用传入的props.actions this.props[method](selectVal)}render() {// 将App改造为UI组件const { count } this.propsconsole.log(【app】, this)return (h1数值{count}/h1select ref{this.selectRef}option value11/optionoption value22/optionoption value33/option/selectnbsp;button onClick{() this.compute(add)}/buttonnbsp;button onClick{() this.compute(minus)}-/buttonnbsp;button onClick{() this.compute(add_odd)}奇数加/buttonnbsp;button onClick{() this.compute(add_delay)}延迟加/button/)}
}
// 用connect函数处理App再暴露出去
export default connect(state ({count: state // 这里的state是从redux容器中获取到的数据}),{ ...actions }// 要解构出来否则props里拿不到// 这样即可在App这个UI组件里通过this.props.actions来使用
)(App)connect方法接收2个参数 函数mapStateToProps建立state对象到props对象的映射关系 redux store里的state可以通过UI组件的props获取mapDispatchToProps建立一个store.dispatch方法到props对象的方法 redux里面action creators创建的函数可以通过props获取 使用中间件 reducer纯函数只承担计算state的功能 view与state意义对应 action存放数据的对象只能被别人操作 同步action发出后reducer立即计算出state 异步action发出后过段时间再执行reducer 中间件一个函数对store.dispatch方法进行改造在发出action和执行reducer两步之间添加了其他功能 index.js引入中间件
import ReactDOM from react-dom
import App from ./App
// 引入中间件
import { createStore, applyMiddleware } from redux
import thunk from redux-thunk
import { counter } from ./redux/reducers
import { Provider } from react-reduxconst store createStore(counter, applyMiddleware(thunk))
ReactDOM.render(Provider store{store}App //Provider,document.getElementById(root)
)
reducer.js只有同步方法
export function counter(state 0, action) {const { type, data } actionswitch (type) {case add:return state datacase minus:return state - datacase add_odd:if (data % 2 ! 0) {return state data}// 这里面没有异步方法default:return state}
}action.js (增加异步方法)
export function add(param) {return {type: add, // 方法名data: param // 对应参数}
}
export function minus(param) {return {type: minus,data: param}
}
export function add_odd(param) {return {type: add_odd,data: param}
}
// 改造成异步action
export function add_delay(param) {return dispatch {setTimeout(() {dispatch(add(param))}, 1000)}
}
