react七——react-redux

react-redux

我们知道redux是：store中维护了一个state，当我们view层dispatch了一个action，然后reducer根据这个action来更新state。
而react-redux呢，是react和redux的一个桥梁，也不是说没有他 react和redux不能使用，而是他做了一些封装，使得开发者能够更方便的使用redux
react-redux将组件分成两种：
1、容器组件(智能组件)：容器组件负责做数据交互
2、UI组件(木偶组件)：UI组件嵌套在容器组件里,只负责使用数据来显示数据

比起redux新增 两个模块
1、Provider 组件来对Router进行包裹，并传入store，这样在内部组件的其他组件都可以共享store的数据 并且对其进行更改

在根组件中导入
     import {Provider} from 'react-redux'
     ...
     import store from './javascripts/redux/store'
     ReactDOM.render(
        <Provider store={store} >
            <Router history={hashHistory}>
                <Route path="/" component={App}>
                    <IndexRoute component={A}/>
                    <Route path="/a" component={A}></Route>
                    <Route path="/b" component={B}></Route>
                </Route>
            </Router>
        </Provider>,document.getElementById("app"))

2、connect 是将store中的数据通过props来显示在view层，并封装一个函数来响应用户操作时dispatch的action

import {connect} from 'react-redux'
import Actions from './redux/actionCreator'
...
 const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos,state.visibilityFilter)
  }
}

const mapDispatchToProps = (
  dispatch,ownProps
) => {
  return {
    onClick: () => {
      dispatch({
        type: 'SET_VISIBILITY_FILTER',filter: ownProps.filter
      });
    }
  };
}

export default connect(mapStateToProps,mapDispatchToProps)(A)

view层： <div>{this.props. todos}</div>

解析： connect接受的两个参数

• mapStateToProps

  是对store里的state和组件里的props对象形成映射关系，
  每当store中的state有所更新，就会自动执行，重新计算，从而重新render
  当然，他可以穿两个参数(state,ownProps) 这里如果容器组件里的ownprops改变，也会从新渲染
  eg： 
     // 容器组件的代码
         <FilterLink filter="SHOW_ALL">
           All
         </FilterLink>
     
     const mapStateToProps = (state,ownProps) => {
       return {
         active: ownProps.filter === state.visibilityFilter
       }
     }
  他可以接收state参数,并返回一个对象，这样你就可以在这里进行对数据的处理
  
  eg：
      const mapStateToProps = (state) => {
       return {
         todos: getVisibleTodos(state.todos,state.visibilityFilter)
       }
     }

• mapDispatchToProps

  这个函数或对象 是用来将用户的action传给store，他可以是一个函数，也可以是一个对象
     函数：
         const mapDispatchTopProps = (dispatch,ownProps) = > {
             return {
                 onClick: () => {
                     dispatch({
                         type： 'ADD_NUM',filter:ownProps.filter
                     })
                 }
             }
         }
        这里，作为函数，他返回一个对象，对象里的键值对定义了ui组件的参数怎么发出action
    对象：
        const mapDispatchToProps = {
           onClick: (filter) => {
             type: 'ADD_NUM',filter: filter
           };
         }
         这里，是将上面的函数写成对象形式

  这一块就写到这里，如果有新的感悟会加进来....

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!