• React+Redux学习笔记:React+Redux简易开发步骤


    前言

    React+Redux 分为两部分:

      1. UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM
      2. 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文章:Redux学习笔记:Redux简易开发步骤

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

      1. Provider:容器跟组件,可直接把外部的state传递给所有子组件和UI组件;
      2. mapStateToProps:输入逻辑,把外部的state转化为props对象传递给用户自定义UI组件;
      3. mapDispatchToProps:输出逻辑,根据用户的操作,处理具体Action,并通过dispatch触发更新state;
      4. 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变化。

  • 相关阅读:
    用自己的话描述wcf中的传输安全与消息安全的区别(一)
    web服务器( nginx )及请求代理
    windows系统安装
    邮箱使用
    常见dos命令总结
    前端技术碰到的陌生单词
    前端工作思考
    table标签详解
    PC 端响应式布局
    HTML标签嵌套规则
  • 原文地址:https://www.cnblogs.com/yinluhui0229/p/6723610.html
Copyright © 2020-2023  润新知