成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React手稿之 React-Redux

Freelander / 2626人閱讀

摘要：屬性是必須的。需要一個(gè)與的一致。必須在的返回原。調(diào)試插件日志安裝組件。然后加入到中即可例如擴(kuò)展程序需要在應(yīng)用市場(chǎng)安裝然后在中使用增強(qiáng)功能將加入即可在線實(shí)例推薦閱讀手稿

React-Redux Redux

Action

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

type 屬性是必須的。

Reducer

function todoApp(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO:
      return Object.assign({}, state, {
        todo: action.todo
      })
    default:
      return state
  }
}

1、需要一個(gè)case與action的type一致。

2、必須在switch的defautl返回原state。

Store

管理整個(gè)應(yīng)用的 state

提供getState()方法，可以獲取state

通過(guò)dispatch(action)設(shè)置state

提供subscribe(listener)注冊(cè)和取消注冊(cè)監(jiān)聽事件

React-Redux 
是Redux的React實(shí)現(xiàn),可參考 Official React bindings for Redux.
安裝 
yarn add redux react-redux

//or

npm i redux react-redxu
組件層級(jí)劃分

表現(xiàn)性組件

只負(fù)責(zé)顯示UI的組件。

例如：

容器性組件

不處理UI的組件，也不處理數(shù)據(jù)，只為UI組件提供數(shù)據(jù)的組件。

例如：

connect(state => state)()

其他組件

除以上兩種組件以外的組件。

使用Redux

我們以一個(gè)計(jì)數(shù)器的例子來(lái)說(shuō)明如何使用React-redux.

設(shè)計(jì)表現(xiàn)性組件

需要：顯示當(dāng)前計(jì)數(shù)，默認(rèn)為0；累加按鈕，每次單擊加1；遞減按鈕，每次單擊減1；重置按鈕，單擊將計(jì)數(shù)設(shè)置為0。

import React from "react";

export default ({counter = 0}) => {

  const styles = {
    display: "flex",
    justifyContent: "space-around"
  };

  return (
    

      
當(dāng)前計(jì)數(shù)為：{counter}

      

          
      

    

  );
};

設(shè)置容器性組件

目的是將表現(xiàn)性組件中的數(shù)據(jù)抽離出去交給redux管理，然后通過(guò)容器性組件將redxu與表現(xiàn)性組件關(guān)聯(lián)起來(lái)。

import { connect } from "react-redux";
import CounterIndex from "../components/chapter03/Counter";

export default
  connect(state => ({ ...state.counterRedux }))(({ counter, dispatch }) => );

Action

export const COUNTER_ACTION = "COUNTER_ACTION";

export const addActioner = ({counter}) => {
  return {type: COUNTER_ACTION, counter: counter + 1};
};

export const subActioner = ({counter}) => {
  return {type: COUNTER_ACTION, counter: counter - 1};
};

export const resetActioner = () => {
  return {type: COUNTER_ACTION, counter: 0};
};

Reducer

import { COUNTER_ACTION } from "../actions/CounterAction";

export default (state, action) => {
  switch (action.type) {
    case COUNTER_ACTION:
      return { ...state, counter: action.counter };
    default:
      return state;
  }
}

Store

import React from "react";
import { Provider } from "react-redux";
import { createStore } from "redux";
import CounterReducer from "../reducers/CounterReducer";

let store = createStore(CounterReducer);

export default ({ children }) => {children}

Redux 調(diào)試插件

console日志

安裝redux-logger組件：yarn add redux-logger --dev。

然后加入到redux store中即可：

import { createLogger } from "redux-logger";

store = createStore(reducers, createLogger());

例如：

redux擴(kuò)展程序

需要在Chrome應(yīng)用市場(chǎng)安裝Redux DevTools.

然后在store中使用增強(qiáng)功能將redux-logger加入即可：

const logger = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__(createLogger());
store = createStore(reducers, logger);

在線實(shí)例

推薦閱讀《React 手稿》

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99110.html

相關(guān)文章

  • React手稿之State Hooks of Hooks

    摘要：官方也陳述，接下來(lái)的的工作會(huì)投入到中。從目前官方的文檔可以看出，從以下四個(gè)方面來(lái)提高的編碼。生命周期自定義方法的主要用途是替代之前版本的組件。說(shuō)明到目前為止，在已發(fā)布的版本中有該功能，想體驗(yàn)該功能，必須安裝。 React Hooks React在16.7.0-alpha.0版本中提到了Hooks的概念，目前還是Proposal階段。 官方也陳述，接下來(lái)的90%的工作會(huì)投入到React ...

    DC_er 評(píng)論0 收藏0

  • React手稿之 React-Saga

    摘要：相當(dāng)于一個(gè)放置在與中的墊片。之所以稱之謂副作用呢，就是為了不讓觸發(fā)一個(gè)時(shí)，立即執(zhí)行。也就是在與之間做一個(gè)事情，比如異步獲取數(shù)據(jù)等。使用了中的功能，避免了像的回調(diào)地獄。把放入中最后再實(shí)現(xiàn)相就的即可在線示例推薦閱讀手稿 Redux-Saga redux-saga 是一個(gè)用于管理應(yīng)用程序副作用（例如異步獲取數(shù)據(jù)，訪問瀏覽器緩存等）的javascript庫(kù)，它的目標(biāo)是讓副作用管理更容易，執(zhí)行更...

    notebin 評(píng)論0 收藏0

  • React手稿之類型檢查

    摘要：類型檢查是為了確保傳入組件的參數(shù)正確性。通常在項(xiàng)目中可以使用或者來(lái)實(shí)現(xiàn)。示例以上內(nèi)容在實(shí)現(xiàn)一個(gè)通用組件時(shí)非常有用。類型檢查和參數(shù)默認(rèn)值一起使用，保證組件的正常運(yùn)行。 Typechecking With PropTypes 類型檢查是為了確保傳入組件的參數(shù)正確性。 通常在項(xiàng)目中可以使用Flow或者TypeScript來(lái)實(shí)現(xiàn)。 React提供了PropTypes來(lái)檢查類型。 示例： imp...

    tomorrowwu 評(píng)論0 收藏0

  • React手稿之高階組件

    摘要：示例使用場(chǎng)景代碼復(fù)用類似版本之前的。多個(gè)組件同用一段代碼，或者同樣的方法時(shí)，可以使用。示例在線示例抽象和更改可以通過(guò)包裹的組件公共抽象出來(lái)?？梢酝ㄟ^(guò)包裹的組件傳遞修改添加等的示例渲然劫持條件渲然。示例反向繼承返回的高階組件類繼承了。 Higher-Order Components HOC 不是React的標(biāo)準(zhǔn)API。 HOC 是一個(gè)函數(shù)。 HOC 返回一個(gè)Component。 示例...

    dkzwm 評(píng)論0 收藏0

  • React手稿 - Context

    摘要：提供了除之外的傳參數(shù)的方式。是全局跨組件傳遞數(shù)據(jù)的。在線示例推薦閱讀手稿 Context Context提供了除props之外的傳參數(shù)的方式。 Context是全局跨組件傳遞數(shù)據(jù)的。 API React.createContext const {Provider, Consumer} = React.createContext(defaultValue); Provider ...

    qingshanli1988 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<