React手稿之 React-Redux

2018-11-09 admin

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、需要一个caseactiontype一致。

    2、必须在switchdefautl返回原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的组件。

    例如:

    <div></div>
    
  • 容器性组件

    不处理UI的组件,也不处理数据,只为UI组件提供数据的组件。

    例如:

    connect(state => state)(<YourComponent />)
    
  • 其他组件

    除以上两种组件以外的组件。

使用Redux

我们以一个计数器的例子来说明如何使用React-redux.

  • 设计表现性组件

    需要:显示当前计数,默认为0;累加按钮,每次单击加1;递减按钮,每次单击减1;重置按钮,单击将计数设置为0。

    import React from 'react';
    
    export default ({counter = 0}) => {
    
      const styles = {
        display: 'flex',
        justifyContent: 'space-around'
      };
    
      return (
        <div>
          <h1>当前计数为:{counter}</h1>
          <div style={styles}>
            <button>加</button> <button>减</button> <button>重置</button>
          </div>
        </div>
      );
    };
    
  • 设置容器性组件

    目的是将表现性组件中的数据抽离出去交给redux管理,然后通过容器性组件将redxu与表现性组件关联起来。

    import { connect } from 'react-redux';
    import CounterIndex from '../components/chapter03/Counter';
    
    export default
      connect(state => ({ ...state.counterRedux }))(({ counter, dispatch }) => <CounterIndex counter={counter} dispatch={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 }) => <Provider store={store}>{children}</Provider>
    

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 手稿》

原文链接:https://segmentfault.com/a/1190000016957841

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-44931.html

文章标题:React手稿之 React-Redux

相关文章
JavaScript正则进阶之路——活学妙用奇淫正则表达式
有些童鞋肯定有所疑惑,花了大量时间学习正则表达式,却发现没有用武之地,正则不就是验证个邮箱嘛,其他地方基本用不上,其实,大部分人都是这种感觉,所以有些人干脆不学,觉得又难又没多大用处。殊不知,想要成为编程大牛,正则表达式必须玩转,GitH...
2017-05-31
ajax教程之ajax使用Http请求
ajax中是如何让使用http请求的呢? 在传统的JS编程中,如果您希望从服务器上的文件或数据库中得到任何的信息,或者向服务器发送信息的话,就必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发...
2015-11-12
DOM之通俗易懂讲解
DOM 是所有前端开发每天打交道的东西,但是随着 jQuery 等库的出现,大大简化了 DOM 操作,导致大家慢慢的 “遗忘” 了它的本来面貌。不过,要想深入学习前端知识,对 DOM 的了解是不可或缺的,所以本文力图系统的讲解下 DOM 的...
2016-01-13
JS教程之基础
javascript教程之什么是 JavaScript? JavaScript 被设计用来向 HTML 页面添加交互行为。JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)。JavaScript 由数行可执行计算机代码组...
2015-11-12
Ajax教程之Ajax介绍
Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本文的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 —— 从总体概述...
2015-11-12
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $(&#x27;#gzrwTable&#x27;).on(&#x27;click-row.bs.table&#x27;, function(e, row, $element) { $(&#x...
2017-02-17
数据格式之战:JSON vs XML
在比较JSON和XML之前,我们先来上一堂关于数据格式的简要历史(更准确的说,是关于XML的始祖): 早在1970年,IBM开发了一种叫Generalized Markup Language的标记语言,简称GML,它主要是为脚本语言定义的一...
2016-01-13
JavaScript深入之类数组对象与
类数组对象 所谓的类数组对象: 拥有一个 length 属性和若干索引属性的对象 举个例子: var array = [&#x27;name&#x27;, &#x27;age&#x27;, &#x27;sex&#x27;]; var ...
2017-05-27
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
javascript数据结构与算法之检索算法
查找数据有2种方式,顺序查找和二分查找。顺序查找适用于元素随机排列的列表。二分查找适用于元素已排序的列表。二分查找效率更高,但是必须是已经排好序的列表元素集合。 一:顺序查找 顺序查找是从列表的第一个元素开始对列表元素逐个进行判断,直到找到...
2017-03-22
回到顶部