国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React手稿之 React-Redux

Freelander / 2629人閱讀

摘要：屬性是必須的。需要一個與的一致。必須在的返回原。調試插件日志安裝組件。然后加入到中即可例如擴展程序需要在應用市場安裝然后在中使用增強功能將加入即可在線實例推薦閱讀手稿

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、需要一個case與action的type一致。

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

Store

管理整個應用的 state

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

通過dispatch(action)設置state

提供subscribe(listener)注冊和取消注冊監聽事件

React-Redux 
是Redux的React實現,可參考 Official React bindings for Redux.
安裝 
yarn add redux react-redux

//or

npm i redux react-redxu
組件層級劃分

表現性組件

只負責顯示UI的組件。

例如：

容器性組件

不處理UI的組件，也不處理數據，只為UI組件提供數據的組件。

例如：

connect(state => state)()

其他組件

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

使用Redux

我們以一個計數器的例子來說明如何使用React-redux.

設計表現性組件

需要：顯示當前計數，默認為0；累加按鈕，每次單擊加1；遞減按鈕，每次單擊減1；重置按鈕，單擊將計數設置為0。

import React from "react";

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

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

  return (
    

      
當前計數為：{counter}

      

          
      

    

  );
};

設置容器性組件

目的是將表現性組件中的數據抽離出去交給redux管理，然后通過容器性組件將redxu與表現性組件關聯起來。

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 調試插件

console日志

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

然后加入到redux store中即可：

import { createLogger } from "redux-logger";

store = createStore(reducers, createLogger());

例如：

redux擴展程序

需要在Chrome應用市場安裝Redux DevTools.

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

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

在線實例

推薦閱讀《React 手稿》

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99110.html

相關文章

  • React手稿之State Hooks of Hooks

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

    DC_er 評論0 收藏0

  • React手稿之 React-Saga

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

    notebin 評論0 收藏0

  • React手稿之類型檢查

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

    tomorrowwu 評論0 收藏0

  • React手稿之高階組件

    摘要：示例使用場景代碼復用類似版本之前的。多個組件同用一段代碼，或者同樣的方法時，可以使用。示例在線示例抽象和更改可以通過包裹的組件公共抽象出來。可以通過包裹的組件傳遞修改添加等的示例渲然劫持條件渲然。示例反向繼承返回的高階組件類繼承了。 Higher-Order Components HOC 不是React的標準API。 HOC 是一個函數。 HOC 返回一個Component。 示例...

    dkzwm 評論0 收藏0

  • React手稿 - Context

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

    qingshanli1988 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<