简谈自己对redux的理解

Posted zhangjixiang123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简谈自己对redux的理解相关的知识,希望对你有一定的参考价值。

redux描述
        首先redux 有3大组成部分 1.store2. action .3reducer  还有边外的 components, 如何触发action 呢?首先的拿到store对象,store对象是通过 redux中的createStore()创建的,他有两个参数,第一个是reducer, 第二个是一个可以装在处理异步的applyMiddleware()  applyMiddleware 也是从redux 中导入, 它里面的参数是个redux-thunk ,当我们创建了这个 store对象, 在组件中 做dispatch 去派发一个action 他包含了两个重要的数据一个是 action的类型 一个是payload 这个action一旦派发,注册在store里面的reducer 会自动运行 所以我们在创建store的时候要创建一个reducer ,reducer是什么呢? 他就是一个纯函数,它用来返回一个新的状态,那么他什么时候执行呢 ,这是就需要action 告诉他 通过那个action.type, 最重要的是reducer必须返回一个最新的状态 这时我们就引入了immutable 然后通过subscribe函数做个订阅 这时我们才知道这个state已经更新了 但是我们做项目时一般和react-redux联合使用
通过 react-redux 中的 provider 将store总分支注入根组件,其原理就是所谓的context源码如下
export function createProvider(storeKey = store, subKey) {
......
class Provider extends Component {
    getChildContext() {
        return { [storeKey]: this[storeKey], [subscriptionKey]: null }
    }
    constructor(props, context) {
        super(props, context)
        this[storeKey] = props.store;
    }
 
    render() {
        return Children.only(this.props.children)
    }
}
}

 

,然后通过react-redux的connect使其组件可以访问到store 因为redux和react没有直接的关系 不像vue和vuex那样基情满满,connect有四个参数分别是
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
第一个参数:允许我们把store中的数据作为props绑定到组件上,只要store更新了就会调用这个方法。例子如下
const mapStateToProps = (state) => {
    return ({
        count: state.counter.count
    })
}
第二个参数:允许我们将action作为props绑定到组件中,例子如下
const mapDispatchToProps=(dispatch)=>{
        return {
            xx(xinxi){
            dispatch({type:join,xinxi})
            }
        }
    }

export default connect(mapStateToProps, mapDispatchToProps)(yourComponent)
后两个参数基本上也做项目的时候也没接触过  想了解可以参考api文档 


以上是关于简谈自己对redux的理解的主要内容,如果未能解决你的问题,请参考以下文章

对redux的理解

简谈订单管理系统(OMS)

简谈单线程多线程的理解

redux 自己的理解

如何理解这段代码片段中的两对括号?

简单用 React+Redux+TypeScript 实现一个 TodoApp