react-redux教程

一、react-redux是什么？

redux： 是一个用于管理组件公共状态的一个可预测状态的框架,集中管理组件的状态.核心在于store,它提供了dispatch,getState,subscribe方法,理解Redux的工作流程很重要

react-redux： 它是redux作者封装的一个库,是一个第三方的模块,对Redux进一步的封装简化,提供了一些额外的API(例如:Provider,connect等),使用它可以更好的组织和管理我们的代码,遵循一定的组件拆分规范,在React中更方便的使用Redux。
关系: 它不是必须的,在实际项目中,可选用.是使用Redux还是使用react-redux,取决于你自己,项目组成员的熟悉程度,适合自己的才是最好的,使用后者提供了一些便利,但需要额外的掌握一些API的使用。
Redux流程：
component–>dispatch(action)–>reducer–>subscribe–>getState–>component
react-redux流程：
component–>actionCreator(data)–>reducer–>component

二、安装

npm install --save react-redux
或
yarn add react-redux

三、state

前端中的state就是数据，就是一个对象。redux中的state是不能直接修改的，只能通过action来修改，相当于我们在单例中定义setter方法。

四、action

redux 将每一个更改动作描述为一个action，要更改state中的内容，你需要发送action。一个action是一个简单的对象，用来描述state发生了什么变更。

const INCREMENT = 'INCREMENT'
const incrementAction = {"type": INCREMENT, "count": 2}

上面这就是一个action，说白了就是一个对象，根据里面的type判断做什么操作。

五、reducer

数据state，指示action都有了那么就是实现了。reducer就是根据action来对state进行操作。

const calculate = (state: ReduxState = initData, action: Action ) => {
    switch (action.type) {
        case INCREMENT:
            return {num: state.num + action.count}
        case REDUCE:
            return {num: state.num - action.count}
        default:
            return state
    }
}

export {calculate}

通过reducer操作后返回一个新的state，比如这里根据action的type分别对state.num进行加减。

六、store

store就是整个项目保存数据的地方，并且只能有一个。创建store就是把所有reducer给它。

import { createStore, combineReducers } from "redux";
import { calculate } from "./calculate";

// 全局你可以创建多个reducer 在这里统一在一起
const rootReducers = combineReducers({calculate})
// 全局就管理一个store
export const store = createStore(rootReducers)

七、Provider和connect

Provider： 它是一个组件,用于连接了Store,它把store提供给内部组件,接受store作为props,然后通过context往下传，这样react中任何组件都可以通过context获取store。

 <Provider store={store}>
    <Router>
      <Route path="/" component={App} />
    </Router>
  </Provider>

connect：
connect顾名思义,是一个连接器,它是连接容器组件和UI(傻瓜)组件的,它是 react-redux提供的一个方法,用于从 UI 组件生成容器组件,把两种组件给连接起来

connect方法接收四个参数,一个是 mapStateToProps,另一个是 mapDispatchToProps,当然还有两个参数: mergeProps, options,它们是可选的。

1、mapStateToProps（state, ownProps）：

mapStateToProps是一个函数，用于建立组件跟 store 的 state 的映射关系（简单来理解就是只能输入，把state中的数据渲染到模板上），它可以传入两个参数，结果一定要返回一个 object 。传入mapStateToProps之后，会订阅store的状态改变，在每次 store 的 state 发生变化的时候，都会被调用。

 const mapStateToProps = (state) => {
  return {
    todoList: state.todoList
  }
}

2、mapDispatchToProps(dispatch,[ownProps])

mapDispatchToProps用于建立组件跟store.dispatch的映射关系（简单来概括就是输出）,可以是一个object，也可以传入函数。如果mapDispatchToProps是一个函数，它可以传入dispatch,ownProps, 定义UI组件如何发出action，实际上就是要调用dispatch这个方法。

/* 假设actions是一个import进来的值为actionCreator的object */
action.increase = function (info) {
  return {
     {
        type:'INCREASE'，
        info
     }
  }
}
action.decrease = function (info) {
  return {
     {
        type:'DECREASE'，
        info
     }
  }
}
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    increase: (...args) => dispatch(actions.increase(...args)),
    decrease: (...args) => dispatch(actions.decrease(...args))
  }
}

3、mergeProps(stateProps, dispatchProps, ownProps)

它是 connect函数的第三个参数,将 mapStateToProps()与 mapDispatchToProps()返回的对象和组件自身的 props合并成新的 props并传入组件。默认返回 Object.assign({}, ownProps, stateProps, dispatchProps)的结果

const mergeProps = () => {
      return Object.assign({}, ownProps, stateProps, dispatchProps)
}

4、options

当 pure = true表示 connect容器组件将在 shouldComponentUpdate中对 store的 state和ownProps进行浅对比，判断是否发生变化，优化性能。若为false则不对比

这个options有很多,具体可以参考 react-redux官方文档

{
  context?: Object,
  pure?: boolean,
  areStatesEqual?: Function,
  areOwnPropsEqual?: Function,
  areStatePropsEqual?: Function,
  areMergedPropsEqual?: Function,
  forwardRef?: boolean,
}

八、在容器中的使用

//定义一个容器
class Counter extends Component {
  render() {
    const { value, onIncreaseClick } = this.props
    return (
      <div>
        <span>{value}</span>
        <button onClick={onIncreaseClick}>Increase</button>
      </div>
    )
  }
}