React Redux学习笔记：React Redux简易开发步骤

原文链接： https://www.mk2048.com/blog/blog.php?id=h00jc1ikjkaa&title=React%2BRedux%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%9AReact%2BRedux%E7%AE%80%E6%98%93%E5%BC%80%E5%8F%91%E6%AD%A5%E9%AA%A4

前言

React Redux 分为两部分：

UI组件：即React组件，也叫用户自定义UI组件，用于渲染DOM

容器组件：即Redux逻辑，处理数据和业务逻辑，支持所有Redux API，参考之前的文章：Redux学习笔记：Redux简易开发步骤

而React Redux是以上两部分结合起来，方便在React中使用Redux，专用库为React-Redux.js。
React-Redux.js新增了一些新方法：

Provider：容器跟组件，可直接把外部的state传递给所有子组件和UI组件；

mapStateToProps：输入逻辑，把外部的state转化为props对象传递给用户自定义UI组件；

mapDispatchToProps：输出逻辑，根据用户的操作，处理具体Action，并通过dispatch触发更新state；

connect：根据UI组件、输入逻辑、输出逻辑生成容器组件；

源代码

本文实例源代码参考：React-Redux-Primary-Demo 中的webapp/redux/index2.js。

演示地址：React-Redux实例演示

具体开发步骤

1.创建主文件js，比如index.js

2.定义Render入口，即容器组件

    ReactDOM.render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('root')
    )

说明：<Provider>是包裹在所有容器外面的根组件，目的是可以直接传递state给所有子组件。（利用React组件的context,可参考：React组件实现越级传递属性）

3.connect根据UI组件生成容器组件，并定义输入（mapStateToProps）、输出（mapDispatchToProps）逻辑

    const App = connect(
      mapStateToProps,
      mapDispatchToProps
    )(Counter)

说明：connect将用户自定义的UI组件（即Counter）和React-Redux自动生成的容器组件（即App）连起来，目的是：前者负责UI展示，后者负责逻辑处理。

4.定义用户自定义UI组件，即React Component

    class Counter extends Component {
      render() {
        const { value, onIncreaseClick } = this.props
        return (
          <div>
            <span>{value}</span>
            <button onClick={onIncreaseClick}>累加一次</button>
          </div>
        )
      }
    }

5.定义输入输出逻辑

    // 输入逻辑：
    //    将state映射成props传递给UI组件（即Counter组件）
    function mapStateToProps(state) {
      return {
        value: state.count
      }
    }

    // 输出逻辑：
    //    将用户对UI组件的操作映射成Action，通过dispatch，触发reducer（即conter），生成新的state
    function mapDispatchToProps(dispatch) {
      return {
        onIncreaseClick: () => dispatch({ type: 'increase' })
      }
    }

6.创建store，并绑定reducer

const store = createStore(counter); // createStore的第一个参数必须是个函数，mapDispatchToProps中执行dispatch()时，该函数就叫reducer

7.定义Reducer，生成新的state

    function counter(state = { count: 0 }, action) {
      const count = state.count
      switch (action.type) {
        case 'increase':
          return { count: count   1 }
        default:
          return state
      }
    }

说明：state生成之后，会自动触发mapStateToProps，并渲染View，不需要subscribe监听state变化。

更多专业前端知识，请上【猿2048】www.mk2048.com