redux学习总结

先在这里记录一下参考的文献：

• redux讲解
• connect讲解
• bindActionCreators

这几篇都是很有针对性的文章，讲的也很好，最好看一下，否则你基本不知道我在讲什么．

首先介绍一下redux，这玩意就是个坑，差点让我放弃的程度．虽然还是不清除，但是被他虐了一个下午了，现在也可以给他点颜色瞧瞧了．

Redux中基本名词介绍

store

所有的数据都存储在store中，注意，这里的store只是一个比喻，名字不一定叫store，可以是其余自定义的很多值．

state

这里的state跟react中的this.state不是一个概念，准确的说是store在某一个时刻的值，注意，是某一个时刻的值．

action

一个对象，除了必须要有的type属性之外，还可以自由设置别的属性，type表示该action的名字．至于action有什么用，结合下面的reducer来理解可能更加合适一点．

reducer

处理store，并产生新的state的函数，有对应的action来调用．

dispathch

输出action，也可以理解为将新建的action绑定进store中．

subscribe

回调函数，在store发生改变后自动调用的函数．

store创建方式１

在项目初始化时可以直接创建store．比如这个慕课网教程：react实战，webapp开发实例中，这个鬼畜的老师在项目开始就实例化了一个store：

const store=createStore(defaultReducer,initState);

其中第一个参数defaultReducer是reducer的函数，这类函数的编写要求是：传入参数(state,action)，返回值不强制，但是在函数中不能修改state的值，比如state++之类的是不能的．所以一般的形式是：

export default function exampleReducer(state,action){
    switch(action.type){
        case "update_userInfo":
            const temp=state;
            temp="new state value";
            return temp;
        default:
            return state;
    }
}

根据传入的action来调用对应的功能．所以action是命令，reducer是执行者．

initState就不用介绍了吧，初始化state的值．这样我们就得到了一个store的对象．

store创建方式２

这种方式可能更加常见，因为那个教程里面全是这样的形式：

function new_store_key_set_action_function(data){
    return{
        type:'action_name',
        data
    };
}
function mapStateToProps(state){
    return {}
}
function mapDispatchToProps(dispatch){
    return {
        new_store_key:bindActionCreator(this.new_store_key_set_action_function)
    }
}
connect(
    mapStateToProps,
    mapDispatchToProps
)(ModalName)

首先，看不懂没关系，你要是能看懂，那就奇怪了，我TM被这玩意折腾了一个下午，真心绝望，幸好，最后半推半就，走出来了．

先说一下这个的作用，首先，是将state保存进props中，第二，就是将

{
    new_store_key:{
        type:'action_name',
        data
    }
}

保存进props中，方便在该组件的任意地方通过this.props进行调用．甚至是使用this.props.children传递给子组件．

第二，要弄懂这个的工作原理，建议先看这篇文章：

• connect讲解

在了解了connect的作用之后，再来了解bindActionCreator的作用：

• bindActionCreators

这样就能实现，在组件中往redux中添加数据．