react-redux新手入门

简介

react-redux是Redux 的作者封装了一个 React 专用的库 React-Redux
redux是用于react集中管理状态gitbook
简单说明为什么使用redux:
一般我们使用组件通过传参来展示我们需要展示的效果，例如分页组件 传入页码1则显示第一页，而分页则可能使用在任何组件中，这个时候如果是外层的传参进来，并且层级很多，这样取参和传参是变得麻烦，一不小心就可能在中间变成了其他的东西

react_desc1.png

如果我们使用的层级不多，应用不大不复杂逻辑够清晰，这几种情况我们都可以不使用redux，应为这个本身就被设计用来处理复杂的情况

原则

1、单一数据源--只存在于唯一一个 store 中
2、State 是只读的--唯一改变 state 的方法就是触发 action
3、使用纯函数来执行修改--你需要编写 reducers

使用

// 引入
npm install --save react-redux

React-Redux 将所有组件分成两大类：UI 组件（presentational component）和容器组件（container component）。

UI组件
只负责 UI 的呈现，不带有任何业务逻辑
没有状态（即不使用this.state这个变量）
所有数据都由参数（this.props）提供
不使用任何 Redux 的 API

容器组件
负责管理数据和业务逻辑，不负责 UI 的呈现
带有内部状态
使用 Redux 的 API

React-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。后者负责与外部的通信，将数据传给UI组件，由UI渲染出视图。

import React from 'react'
import {connect} from 'react-redux'

// mapStateToProps 建立一个从（外部的）state对象到（UI 组件的）props对象的映射关系
const mapStateToProps = (state)=> {
  return {
    count: state.count
  }
}

// mapDispatchToProps 用来建立 UI 组件的参数到store.dispatch方法的映射 对应的type执行对应的行为
const mapDispatchToProps = (dispatch)=> {
  return {
    cutClick: ()=> dispatch({type: 'CUT'})
  }
}

const Bb = ({cutClick})=> (
  

    cut
  
)

const Cut = connect(mapStateToProps, mapDispatchToProps)(Bb)
export default Cut

// reducer  这里因为我会使用combineReducers去集成reducer 所以这个是state  不然会是
const counter = (state =0, action)=> {
  switch (action.type) {
    case 'ADD':
      return state+1
    default:
      return state
  }
}
export default counter

// 不使用combineReducers
function counter(state = { count: 0 }, action) {
  const count = state.count
  switch (action.type) {
    case 'ADD':
      return { count: count + 1 }
    default:
      return state
  }
}

最后

import reducer from 'xxx'
let store = createStore(reducer);
render(
  
    
  ,
  document.getElementById('root')
)

完整的代码看这里

如果还有兴趣的话

当然我们可以自己手动去实现一个react-redux(context)

class Index extends Component {
  static childContextTypes = {
    themeColor: PropTypes.string
  }

  constructor () {
    super()
    this.state = { themeColor: 'red' }
  }

  getChildContext () {
    return { themeColor: this.state.themeColor }
  }

  render () {
    return (
      

        

        

      
    )
  }
}

// themeColor就是外面设置的传进来的props
class Title extends Component {
  static contextTypes = {
    themeColor: PropTypes.string
  }

  render () {
    return (
      
React.js 小书标题
    )
  }
}

参考：
redux中文文档
社区博客
阮一峰老师的博客
react笔记小书