React-redux

redux是什么：是一个状态管理工具 类似于vue中的vuex

redux:是一个独立的状态管理，不依赖于任何框架，需要独立安装

npm install redux --save
npm install react-redux --save

redux相关概念：

store:可以看成是一个存放数据的仓库 
actions:相当于处理数据的指令  例如：增加，减少，重置
reducers:是真正处理数据逻辑的函数，最终返回新的数据状态

redux具体如何操作？？？

第一步：在src创建一个redux目录
第二步：在redux目录中再创建文件结构

   src
     .....
     redux
        --actions
          - counter.js   //用于存放counter相关的指令
        --reducers
          - counter.js  //用于存放跟counter相关的reducer逻辑
        --store.js

第三步：分别在分别对应代码

    第一个文件：actions中的counter.js 

            /加
    export const INCREMENT="counter/INCREMENT"

    //减

    export const DECREMENT="counter/DECREMENT"

    //重置
    export const RESET="counter/RESET"


    //将指令转换成函数形式

    export function increment() {
        return {
            type:INCREMENT
        }
    }

    export function decrement() {
        return {
            type:DECREMENT
        }
    }

    export function reset() {
        return {
            type:RESET
        }
    }


  第二个文件：reducers中的counter.js中代码：

            //引入actions
        import { INCREMENT,DECREMENT,RESET } from '../actions/counter'


        const initState= {  count:0 }

        //导出一个reducer函数--counter

        /**
        * 
        * @param {*} state  即初始化的数据
        * @param {*} action 要触发的指令类型
        */


        export default function recuder(state=initState,action) {

            switch(action.type) {

                case INCREMENT:
                    return {
                    count:state.count+1 
                    };
                case DECREMENT:
                    return {
                        count:state.count-1
                    };
                case  RESET:
                    return {
                        count:0
                    };
                default:return initState;

            }
        }


第三步：合并recuers  文件在/src/redux/reducers.js


        //合并多个reducers

    //引入计数器泊reducers-counter
    import Counter from '../redux/reducers/counter'


    export default function combineReducers(state={},action) {

        return {
            counter:Counter(state.counter,action)
        }
        
    }

第四步：创建store并导出

            //引入合并的reducer
        import combineReducers from '../redux/reducers'
        import {createStore} from 'redux'

        let store=createStore(combineReducers)


        export default store;

第五步:在项目根目录index.js中注入store

    import {Provider} from 'react-redux'

    //引入store
    import store from './redux/store'

    ReactDOM.render(
    <Provider store={ store }>
        <Router />
    </Provider>, 
    document.getElementById('root'));


第六步：在需要调用redux数据的组件中使用,例如：counter计数器组件，代码如下：

            
        //先引入react-redux中的connect，做连接
        import {connect} from 'react-redux'

        //引入actions中的指令函数
        import {increment,decrement,reset} from '../../redux/actions/counter'


        class Counter extends Component {
            
            render() { 
                return ( 
                    <div>
                        <p>当前计数：{ this.props.counter.count }</p>
                        <div className="btns">
                            <button onClick={ this.props.increment.bind(this)  }>递增</button>
                            <button  onClick={ this.props.decrement.bind(this)  }>递减</button>
                            <button  onClick={ this.props.reset.bind(this)  }>重置</button>
                        </div>
                    </div>
                );
            }
        }
        
        //export default connect(状态，提交的方法)(导出的组件);

        //状态
        let mapStateProps=(state)=>{

            return {
                counter:state.counter
            }

        }

        //提交的方法
        //let mapDispatchProps
        let mapDispatchProps=(dispatch) =>{

            return {
                increment() {
                    dispatch(increment())
                },
                decrement() {
                    dispatch(decrement())
                },
                reset() {
                    dispatch(reset())
                }

            }

        }


        export default connect(mapStateProps,mapDispatchProps)(Counter);