React-Redux 中文文檔

MobService 發(fā)布于2019-08-26 13:22 / 4149人閱讀

摘要：介紹快速開(kāi)始是的官方綁定庫(kù)。通常你可以以下面這種方式調(diào)用方法基礎(chǔ)教程為了進(jìn)一步了解如何實(shí)際使用，我們將一步一步創(chuàng)建一個(gè)一個(gè)實(shí)例跳轉(zhuǎn)到

介紹 快速開(kāi)始

React-Redux是Redux的官方React綁定庫(kù)。它能夠使你的React組件從Redux store中讀取數(shù)據(jù)，并且向store分發(fā)actions以更新數(shù)據(jù)

安裝

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

npm install --save react-redux

或者

yarn add react-redux

Provider和connect

React-Redux 提供組件，能夠使你的整個(gè)app訪問(wèn)到Redux store中的數(shù)據(jù)：

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提供一個(gè)connect方法能夠讓你把組件和store連接起來(lái)。

通常你可以以下面這種方式調(diào)用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);

基礎(chǔ)教程

為了進(jìn)一步了解如何實(shí)際使用React-Redux，我們將一步一步創(chuàng)建一個(gè)todo listapp

一個(gè)Todo List實(shí)例

跳轉(zhuǎn)到：

云服務(wù)器 GPU云服務(wù)器中文文檔 webrtc中文文檔 docker中文文檔 linux文檔中文

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/108698.html

相關(guān)文章

react+react-router+react-redux全家桶小項(xiàng)目開(kāi)發(fā)過(guò)程分享

摘要：項(xiàng)目地址下載完項(xiàng)目然后即可基于的項(xiàng)目，主要是為了學(xué)習(xí)實(shí)戰(zhàn)。數(shù)據(jù)都是固定的，從餓了么接口臨時(shí)抓的，模擬了一個(gè)的異步數(shù)據(jù)延遲，感謝餓了么。詳細(xì)信息可以看上面的官方文檔，我這里就簡(jiǎn)單說(shuō)一下我這個(gè)項(xiàng)目的應(yīng)用。 react-ele-webapp 項(xiàng)目地址：https://github.com/kliuj/reac... run 下載完項(xiàng)目npm install然后npm run dev 即可 ...

zzir 2019-08-20 15:11 評(píng)論0 收藏0
對(duì)React-redux中connect方法的理解

摘要：應(yīng)用中唯一的狀態(tài)應(yīng)用的子組件例子方法來(lái)看下函數(shù)到底是如何將和組件聯(lián)系在一起的，注意到文檔中有這樣的一句話并不會(huì)改變它連接的組件，而是提供一個(gè)經(jīng)過(guò)包裹的組件。關(guān)于React-redux Redux是React全家桶的重要一員，之前在知乎上也看到類似的提問(wèn)：該如何通俗易懂的理解Redux? Redux是JavaScript的狀態(tài)容器，Redux的概念簡(jiǎn)單明了： 1. 應(yīng)用中所有的狀...

Bryan 2019-08-20 18:25 評(píng)論0 收藏0
React項(xiàng)目實(shí)戰(zhàn)：環(huán)境搭建

摘要：官方文檔中文翻譯構(gòu)建用戶界面的庫(kù)。官方文檔建議學(xué)習(xí)時(shí)以官方文檔為準(zhǔn)，中文翻譯或者第三方作者的教程可以幫助你理清思路會(huì)用到的重要知識(shí)點(diǎn)我也會(huì)進(jìn)行簡(jiǎn)明的解釋，如遇到錯(cuò)誤或者不理解的內(nèi)容，歡迎實(shí)時(shí)指出。前言前面提到前端大統(tǒng)一的概念，如果感興趣，歡迎說(shuō)說(shuō)自己的看法，點(diǎn)擊前往。Web前端框架層出不窮，不可能面面俱到，這里給個(gè)小建議：如果對(duì)Weex App感興趣，應(yīng)該選擇vue框架；如果...

cnio 2019-08-21 17:47 評(píng)論0 收藏0
React項(xiàng)目實(shí)戰(zhàn)：環(huán)境搭建

摘要：官方文檔中文翻譯構(gòu)建用戶界面的庫(kù)。官方文檔建議學(xué)習(xí)時(shí)以官方文檔為準(zhǔn)，中文翻譯或者第三方作者的教程可以幫助你理清思路會(huì)用到的重要知識(shí)點(diǎn)我也會(huì)進(jìn)行簡(jiǎn)明的解釋，如遇到錯(cuò)誤或者不理解的內(nèi)容，歡迎實(shí)時(shí)指出。前言前面提到前端大統(tǒng)一的概念，如果感興趣，歡迎說(shuō)說(shuō)自己的看法，點(diǎn)擊前往。Web前端框架層出不窮，不可能面面俱到，這里給個(gè)小建議：如果對(duì)Weex App感興趣，應(yīng)該選擇vue框架；如果...

GHOST_349178 2019-08-01 18:04 評(píng)論0 收藏0
React與Redux整合技術(shù)簡(jiǎn)介

摘要：展示組件與容器組件的綁定庫(kù)的基本開(kāi)發(fā)思想是展示組件與容器組件相分離。技術(shù)上講，容器組件就是使用從樹(shù)中讀取部分?jǐn)?shù)據(jù)，并通過(guò)來(lái)把這些數(shù)據(jù)提供給要渲染的組件。說(shuō)明：閱讀本篇文章需要對(duì)Redux有一定的了解，對(duì)Redux不了解的同學(xué)可先看看這篇文章Redux技術(shù)架構(gòu)簡(jiǎn)介（一） 1. React中引入react-redux 為了讓Redux和React更好的配合，F(xiàn)acebook專門(mén)開(kāi)發(fā)了一個(gè)...

idealcn 2019-08-22 17:20 評(píng)論0 收藏0