React-Redux

一、Npm isntall redux --save

1. Redux与Vuex区别：Redux独立于React，可以在其他框架使用，但Vuex只能在Vue内使用
2. 为什么要使用Redux？

当组件嵌套的层级过深时或者兄弟组件进行数据交互时，无论是使用属性注册方式还是contenxAPI都会比较麻烦，由于Redux和Vuex类似都有一个状态管理仓库，每一个组件都可以共享这些数据，为编程者提供很大的便利，因此要使用Redux

1. Redux工作流程

1. 创建一个Store

   

  2.创建一个管理者

 

3.子组件引入redux

 4.修改redux中的状态

5.同步修改之后的redux中state

二、融合两个reducer

 三、React-redux精简过程：连接react和redux的一个库

使用目的：消除每个组件使用redux都要经历引入store、store.getState()、store.dispatch(action)、

store.subscribe(updateStoreFunc)这四个步骤的冗余

1. npm install react-redux --save
2. Provider组件：提供store,被provider包装的组件才可以使用react-redux

import { Provider } from 'react-redux';



ReactDOM.render(
    <Provider store={store}>
        <Counter></Counter>
        <ToDoList></ToDoList>
    </Provider>,
window.root);

1. connect函数包装组件

具体用法
import { connect } from 'react-redux';
import * as action from '../../store/action/actionCreator';

const mapStateToProps = (state, ownProps) => {
    // 这里的state就是store中的state
    return {
        count: state.counter.count
    }
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        add: (val) => {
           dispatch(action(acitonTypes.CHANGE_COUNT_SIZE, val))
        }
    }
}

// 用react-redux的connect方法对组件进行包装
// connect方法执行会返回一个函数名将组件作为参数传入进入即为包装
export default connect(mapStateToProps,mapDispatchToProps)(Counter);

简化

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as action from '../../store/action/actionCreator';

const mapStateToProps = (state, ownProps) => {
// 这里的state就是store中的state
    return {
        count: state.counter.count
    }
}

const mapDispatchToProps = (dispatch) => bindActionCreators(action, dispatch);

export default connect(mapStateToProps,mapDispatchToProps)(Counter);

再简化

import { connect } from 'react-redux';

import * as action from '../../store/action/actionCreator';

const mapStateToProps = (state, ownProps) => {
// 这里的state就是store中的state
    return {
        count: state.counter.count
    }
}

export default connect(mapStateToProps,action)(Counter);