npm i -S redux react-redux redux-devtools
在redux中分为3个对象:Action、Reducer、Store
{ type: 'ADD_TODO', text: 'Go to swimming pool' }
(其中type字段是约定也是必须的)(currentState,action)=>newState
Object.assign({},state, { visibilityFilter: action.filter })
(第一个参数不能为state) 等价于ES7的 { ...state, ...newState }
redux示例:
import { createStore } from 'redux' // reducer function counter(state = 0, action) { switch (action.type) { case 'INCREMENT': return state + 1 default: return state } } // state let store = createStore(counter); // 会调用 // 监听 store.subscribe(() => console.log(store.getState()) ); // 调用reducer store.dispatch({ type: 'INCREMENT' });
react的需求:
react-redux 将react组件分为2种:展示组件 和 容器组件
描述如何展示:负责UI样式的展示
描述如何运行:负责数据获取 和 状态更新
react-redux 只有2个API:Provider 和 connect
<Provider store>
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])(Component)
作用:连接React组件与 Redux store
mapStateToProps(state, ownProps) : stateProps
:
mapDispatchToProps(dispatch, ownProps): dispatchProps
:将 dispatch(action) 作为 props 绑定到组件上
mergeProps
:指定 stateProps 以及 dispatchProps 合并到 ownProps 的方式。(默认使用Object.assign)
connect是个高阶组件(HOC)大致源码:
export default function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) { return function wrapWithConnect(WrappedComponent) { class Connect extends Component { constructor(props, context) { this.store = props.store || context.store this.stateProps = computeStateProps(this.store, props) this.dispatchProps = computeDispatchProps(this.store, props) this.state = { storeState: null } // 合并stateProps、dispatchProps、parentProps this.updateState() } shouldComponentUpdate(nextProps, nextState) { // 进行判断,当数据发生改变时,Component重新渲染 if (propsChanged || mapStateProducedChange || dispatchPropsChanged) { this.updateState(nextProps) return true } } componentDidMount() { this.store.subscribe( () => this.setState({ storeState: this.store.getState() }) ) } render() { return ( <WrappedComponent {...this.nextState} /> ) } } return Connect; } }
react-redux示例:
import React, { Component } from 'react'; import { createStore, bindActionCreators } from 'redux'; import { Provider, connect } from 'react-redux'; function clickReduce(state = { todo: 1 }, action) { switch (action.type) { case 'click': return Object.assign({}, state, { todo: state.todo + 1 }); default: return state; } } let store = createStore(clickReduce); class Counter extends Component { render() { return ( <div> <div>{this.props.todo}</div> <button onClick={this.props.clickTodo}>Click</button> </div> ) } } // 方式1: export default connect(state => ({ todo: state.todo }), dispatch => ({ clickTodo: () => dispatch({ type: 'click' }) }))(Counter) // 方式2: export default connect(state => ({ todo: state.todo }), dispatch => bindActionCreators({ clickTodo: () => ({ type: 'click' }) }, dispatch))(Counter);
在redux中,我们只能dispatch简单的action对象。
对应的在react-redux中,我们只能定义同步的reducer方法。
下节将介绍在react-redux如何定义异步方法。让其更加适用于生产环境。
如对本文有疑问, 点击进行留言回复!!
vuejs (2)- Vue 生命周期 和 VueJS ajax
vue axios blob下载文件,文件下载失败将blob的错误信息转换成json格式
网友评论