资讯专栏INFORMATION COLUMN

React-Redux 中文文档

MobService / 4094人阅读

摘要:介绍快速开始是的官方绑定库。通常你可以以下面这种方式调用方法基础教程为了进一步了解如何实际使用,我们将一步一步创建一个一个实例跳转到

介绍 快速开始

React-ReduxRedux的官方React绑定库。它能够使你的React组件从Redux store中读取数据,并且向store分发actions以更新数据

安装

在你的React app中使用React-Redux:

npm install --save react-redux

或者

yarn add react-redux
Providerconnect

React-Redux 提供组件,能够使你的整个app访问到Redux store中的数据:

import React from "react";
import ReactDOM from "react-dom";

import { Provider } from "react-redux";
import store from "./store";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  
    
  ,
  rootElement
);

React-Redux提供一个connect方法能够让你把组件和store连接起来。

通常你可以以下面这种方式调用connect方法:

import { connect } from "react-redux";
import { increment, decrement, reset } from "./actionCreators";

// const Counter = ...

const mapStateToProps = (state /*, ownProps*/) => {
  return {
    counter: state.counter
  };
};

const mapDispatchToProps = { increment, decrement, reset };

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter);
基础教程

为了进一步了解如何实际使用React-Redux,我们将一步一步创建一个todo listapp

一个Todo List实例

跳转到:

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

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

相关文章

  • react+react-router+react-redux全家桶小项目开发过程分享

    摘要:项目地址下载完项目然后即可基于的项目,主要是为了学习实战。数据都是固定的,从饿了么接口临时抓的,模拟了一个的异步数据延迟,感谢饿了么。详细信息可以看上面的官方文档,我这里就简单说一下我这个项目的应用。 react-ele-webapp 项目地址 :https://github.com/kliuj/reac... run 下载完项目npm install然后npm run dev 即可 ...

    zzir 评论0 收藏0
  • React-redux中connect方法的理解

    摘要:应用中唯一的状态应用的子组件例子方法来看下函数到底是如何将和组件联系在一起的,注意到文档中有这样的一句话并不会改变它连接的组件,而是提供一个经过包裹的组件。 关于React-redux Redux是React全家桶的重要一员,之前在知乎上也看到类似的提问:该如何通俗易懂的理解Redux? Redux是JavaScript的状态容器,Redux的概念简单明了: 1. 应用中所有的状...

    Bryan 评论0 收藏0
  • React项目实战:环境搭建

    摘要:官方文档中文翻译构建用户界面的库。官方文档建议学习时以官方文档为准,中文翻译或者第三方作者的教程可以帮助你理清思路会用到的重要知识点我也会进行简明的解释,如遇到错误或者不理解的内容,欢迎实时指出。 前言 前面提到前端大统一的概念,如果感兴趣,欢迎说说自己的看法,点击前往。Web前端框架层出不穷,不可能面面俱到,这里给个小建议: 如果对Weex App感兴趣,应该选择vue框架; 如果...

    cnio 评论0 收藏0
  • React项目实战:环境搭建

    摘要:官方文档中文翻译构建用户界面的库。官方文档建议学习时以官方文档为准,中文翻译或者第三方作者的教程可以帮助你理清思路会用到的重要知识点我也会进行简明的解释,如遇到错误或者不理解的内容,欢迎实时指出。 前言 前面提到前端大统一的概念,如果感兴趣,欢迎说说自己的看法,点击前往。Web前端框架层出不穷,不可能面面俱到,这里给个小建议: 如果对Weex App感兴趣,应该选择vue框架; 如果...

    GHOST_349178 评论0 收藏0
  • React与Redux整合技术简介

    摘要:展示组件与容器组件的绑定库的基本开发思想是展示组件与容器组件相分离。技术上讲,容器组件就是使用从树中读取部分数据,并通过来把这些数据提供给要渲染的组件。 说明:阅读本篇文章需要对Redux有一定的了解,对Redux不了解的同学可先看看这篇文章Redux技术架构简介(一) 1. React中引入react-redux 为了让Redux和React更好的配合,Facebook专门开发了一个...

    idealcn 评论0 收藏0

发表评论

0条评论

MobService

|高级讲师

TA的文章

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