美文网首页
react + redux 中state分析

react + redux 中state分析

作者: lyzaijs | 来源:发表于2016-04-14 10:58 被阅读1143次

    初次接触redux从而在网络上找学习资源。

    1. react+redux系列教程

    react+redux教程(一) 文章中的state在什么位置定义,为什么命名为counter.
    下面是事故代码:

    import { bindActionCreators } from 'redux'
    import { connect } from 'react-redux'
    import Counter from '../components/Counter'
    import * as CounterActions from '../actions/counter'
    
    //将state.counter绑定到props的counter
    function mapStateToProps(state) {
      return {
        counter: state.counter
      }
    }
    //将action的所有方法绑定到props上
    function mapDispatchToProps(dispatch) {
      return bindActionCreators(CounterActions, dispatch)
    }
    
    //通过react-redux提供的connect方法将我们需要的state中的数据和actions中的方法绑定到props上
    export default connect(mapStateToProps, mapDispatchToProps)(Counter)
    

    疑惑点在

    function mapStateToProps(state) {
      return {
        counter: state.counter
      }
    }
    

    (以上代码段是将redux中的state中的counter通过connetct方法绑定到Counter上)
    如何知道state中有counter,在什么地方进行了定义?
    分析:counter:state:counter

    1. 第一个countercomponent中的值名,在component中需要根据这个名字来获得。(这个命名你可以随意)
    2. 第二个counter(即state中的counter),是在combineReducers中给定的:
    Paste_Image.png

    相关文章

      网友评论

          本文标题:react + redux 中state分析

          本文链接:https://www.haomeiwen.com/subject/vdeglttx.html