理解redux、react-redux

一、redux

1、redux是javascript应用的状态容器，提供可预测化的状态管理。
2、安装
   npm install redux --save
3、示例代码：累加器
   3.1、需要store来存储数据
   3.2、store里的reducer初始化state并定义state修改规则
   3.3、通过dispatch一个action来提交对数据的修改
   3.4、action提交到reducer函数里，根据传入的action的type，返回新的state
   创建store src/store/ReduxStore.js

    import {createStore} from 'redux'
    
    const countReducer = (state=0,action)=>{
    	switch(action.type){
        	case:'ADD':
              return state + 1
            case:'MINUS':
              return state - 1
            default:
            return state
        }
    }
    
    const store = createStore()
    
    export default store

创建ReduxPage

    import React, {component} from 'react'
    import store from '../store/ReduxStore'
    
    export default class Reduxpage extends Component {
        //生命周期来重新订阅状态加载页面
        ComponentDidMount(){
        	store.subscribe(()=>{
               this.forceUpdate()
            })
        }
        add = ()=>{
        	store.dispatch({type: 'ADD'})
        }
        minus = ()=>{
        	store.dispatch({type: 'MINUS'})
        }
    	render() {
        	<div>
               <p>{store.getState()}</p>
               <button onClick={this.add}>ADD</button>
               <button onClick={this.minus}>ADD</button>
            </div>
        }
    }

二、react-redux

1、安装 npm install react-redux --save

2、使用react-redux react-redux提供了两个api 2.1 Provider为后代组件提供store 2.2 connect为组件提供数据和变更方法 代码示例： 全局提供store,index.js

      import React from 'react'
      import ReactDom from 'react-dom'
      import App from './App'
      import store from './store/'
      import {Provider} from 'react-redux'
      
      ReactDom.render(
      	<Provider store= {store}>
        	<App/>
        </Provider>,
        document.querySelector('#root')
      )

获取状态数据，ReactReduxPage.js

import React, {component} from 'react'
import {connect} from 'react-redux'

class ReactReduxPage extends Component {
  render() {
    const { num, add, minus } = this.props;
    return (
      <div>
        <h1>ReactReduxPage</h1>
        <p>{num}</p>
        <button onClick={add}>add</button>
        <button onClick={minus}>minus</button>
      </div>
    );
  }
}
const mapStateToProps = state =>{
   return {
     num: state
   }
}
const mapDispatchToProps = {
	add:()=>{
    	return {type:'add'}
    },
    minus:()=>{
    	return {type:'minus'}
    }
}
export default connect(
	mapStateToProps, // 状态映射
    mapDispatchToProps // 派发事件映射
)(ReactReduxPage)