资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/React-Redux 入门教程

React-Redux 入门教程

xuweijian / 1080人阅读

摘要：具体了解此方法可以请戳这里最后把对象暴露给在主入口进行调用我们通过提供的顶层组件传入然后把要展示的写入顶层组件就行了，提供了整个全局的供所有的子组件进行调用具体代码实现请

项目目录 

</>复制代码 
  1. 整个项目目录分为图中所示：
  2. Redux分为{Action,Reducer,Store}
  3. 入口文件为App.jsx
项目效果 

</>复制代码 
  1. 从图中可以看出整个组件可以分为3个组件，内部Counter组件，计算Count的Summary的组件，以及整个容器组件ControlPanel
Content 
</>复制代码 
  1. React Redux 事实上是两个独立的产品， 应用可以使用 React 而不使用
  2. Redux ，也可以使用 Redux 而不使用 React ，但是，如果两者结合使用，没有理由不使用
  3. 一个名叫 react-redux 的库这个库能够大大简化代码的书写;
  4. react-redux 的两个最主要功能：
  5. connect ：连接数据处理组件和内部UI组件；
  6. Provider ：提供包含 store的context；
  7. 通过Content实现传递Store的目的
  8. 首先定义好

Action/index.jsx

</>复制代码 
  1. export const Increment="increment"
  2. export const Decrement="decrement"
  3. export const increment=(counterCaption)=>({
  4.     type:Increment,
  5.     counterCaption
  6.   }
  7. )
  8. export const decrement=(counterCaption)=>({
  9.     type:Decrement,
  10.     counterCaption
  11. })

Reducer/index.jsx

</>复制代码 
  1. import {Increment,Decrement} from "../Action"
  2. export default(state,action)=>{
  3.     const {counterCaption}=action
  4.     switch (action.type){
  5.         case Increment:
  6.         return {...state,[counterCaption]:state[counterCaption]+1}
  7.         case Decrement:
  8.         return {...state,[counterCaption]:state[counterCaption]-1}
  9.         default:
  10.         return state
  11.     }
  12. }

Store/store.jsx

</>复制代码 
  1. import {createStore} from "redux"
  2. import reducer from "../Reducer" 
  3. const initValue={
  4.     "First":0,
  5.     "Second":10,
  6.     "Third":20
  7. }
  8. const store=createStore(reducer,initValue)
  9. export default store
</>复制代码 
  1. 在action中我们会发现定义了两个常量，一个控制增加，一个控制减少，然后暴露出增加减少的函数。这两个函
  2. 数可以在Couter组件中调用

Counter.jsx

</>复制代码 
  1. import React, { Component } from "react"
  2. import {increment,decrement} from "../Redux/Action"
  3. import {connect} from "react-redux";
  4. const buttonStyle = {
  5. margin: "20px"
  6. }
  7. function Counter({caption, Increment, Decrement, value}){
  8. return (
  9.         
  10.             
  11.             
  12.             {caption} count :{value}
  13.         
  14.     )
  15. }
  16. function mapState(state,ownProps){
  17. return{
  18.     value:state[ownProps.caption]
  19. }
  20. }
  21. function mapDispatch(dispatch,ownProps){
  22. return {
  23.     Increment:()=>{
  24.         dispatch(increment(ownProps.caption))
  25.     },
  26.     Decrement:()=>{
  27.         dispatch(decrement(ownProps.caption))
  28.     }
  29. }
  30. }
  31. export default connect(mapState,mapDispatch)(Counter)
</>复制代码 
  1. 1.在counter组件中我们会发现引入了增加和减少这两个函数，然后在mapDispatch函数中进行调用，暴露出增               
  2.   加和减少合并的一个对象，然后通过解构在Counter函数组件中获得传递过来的经过mapDispath包装过后的增
  3.   加和减少组件。mapDispatch函数的作用就是把内层函数组件的增加和减少的动作派发给Store
  4. 然后我们转过来看Reducer/index.jsx
  5.   reducer是专门处理数据逻辑的，通过传入（state,action），针对不同的action返回一个不同的store对象

Store/store.js

</>复制代码 
  1.  是专门对store进行的一个封装，通过createStore方法传入reducer和初始化state（initValue）来暴露        
  2.  store对象，此对象非原始的store对象，该对象是对原始store进行注册，增加了若干方法。具体了解此方法可以**请戳这里**
</>复制代码 
  1. [https://github.com/reactjs/redux/blob/master/src/createStore.js][1]
</>复制代码 
  1. 最后把store对象暴露给App.jsx在主入口进行调用
</>复制代码 
  1. import React, {Component, PropTypes} from "react";
  2. import ReactDOM, {render} from "react-dom";
  3. import store from "./Redux/Store/Store.jsx"
  4. import {Provider} from "react-redux";
  5. import ControlPanel from "./Component/ControlPanel.jsx"
  6. import "./style/common.less"
  7. render(
  8.     
  9.     
  10.     ,
  11.     document.body.appendChild(document.createElement("div"))
  12. );
</>复制代码 
  1. 我们通过react-redux提供的顶层组件Provider传入store然后把要展示的ControlPanel写入顶层组件就行了，        
  2. Provider提供了整个全局的store供所有的子组件进行调用

具体代码实现请git clone
https://github.com/jeromehan/...

GPU云服务器 云服务器 react-redux linux教程入门教程 入门教程 编程入门教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84913.html

相关文章

  • react-redux插件入门

    摘要：描述这个插件可以让我们的代码更加的简洁和美观。安装使用提供了两个重要的接口使用了这个插件，的和就可以忘记来，它们就用不着了。现在有美女个。 可先查看我的redux简单入门 react-redux简介 react-redux是使用redux开发react时使用的一个插件，另外插一句，redux不是react的产品，vue和angular中也可以使用redux；下面简单讲解，如何使用rea...

    Baaaan 评论0 收藏0

  • React-Redux 中文文档

    摘要：介绍快速开始是的官方绑定库。通常你可以以下面这种方式调用方法基础教程为了进一步了解如何实际使用，我们将一步一步创建一个一个实例跳转到 介绍 快速开始 React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据，并且向store分发actions以更新数据 安装 在你的React app中使用React-Redux： npm i...

    MobService 评论0 收藏0

  • react-redux初级教程，纯白话讲述redux数据、开发流程整理，redux数据持久化实现

    摘要：日常项目直接使用是完全没有问题的，可是随着项目的日益壮大，组件数量的逐渐增长，组件之间的嵌套使得数据的管理越来越繁重。最后数据保存进了中的，页面也会根据的改变自动更新。 以下文章均为个人近期所学心得，自学react、redux，逐渐找到自己的方向，现将自己的方向方式写出来，以供大家学习参考，肯定会有不足，欢迎批评指正。 日常项目直接使用react是完全没有问题的，可是随着项目的日益壮大...

    gclove 评论0 收藏0

  • 手挽手带你学React：四档（下篇）一步一步学会react-redux

    摘要：手挽手带你学入门四档用人话教你，理解架构，以及运用在中。学完这一章，你就可以开始自己的项目了。结合搭建基础环境我们上一章讲过了的原理，内部是有一个的，只有才可以控制它变化。 手挽手带你学React入门四档,用人话教你react-redux，理解redux架构，以及运用在react中。学完这一章，你就可以开始自己的react项目了。 视频教程 上一篇我们自己实现了Redux，这一篇我们来...

    FullStackDeveloper 评论0 收藏0

发表评论

登陆后可评论

0条评论

xuweijian

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<