redux

一、什么是redux

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。可以让你构建一致化的应用,运行于不同的环境(客户端、服务器、原生应用),并且易于测试。Redux 除了和 React 一起用外,还支持其它界面库。 它体小精悍(只有2kB,包括依赖)。

二、学习网址:

http://www.redux.org.cn/ 中文网址 http://redux.js.org/ 英文网址

三、安装与引入

npm install --save redux 安装 import { createStore } from 'redux';引入

四、redux三大原则

单一数据源、state是只读的,使用纯函数来执行修改

五、使用redux

当安装好redux包并引入以后,我们通过creteStore(reducer)创建一个store状态机,用于状态管理。reducer是一个纯函数【纯函数即返回值只有传入的参数决定】,reducer(state,action)有2个参数,state为当前的状态,action 就是一个描述“发生了什么”的普通对象,reducer中通过switch流程控制语句判断action.type的值,来更改state。通过使用store.dispatch(action)来触发aciton的改变,然后通过store.subscribe(()=>{}),来手动订阅更新,当store.dispatch(action)后,就会触发store.subscribe。通过使用store.getState()获取当前store中state状态

import{ render } from 'react-dom';
import { createStore } from 'redux';

/**
 * 这是一个 reducer,形式为 (state, action) => state 的纯函数。
 * 描述了 action 如何把 state 转变成下一个 state。
 *
 * state 的形式取决于你,可以是基本类型、数组、对象、
 * 甚至是 Immutable.js 生成的数据结构。惟一的要点是
 * 当 state 变化时需要返回全新的对象,而不是修改传入的参数。
 *
 * 下面例子使用 `switch` 语句和字符串来做判断,但你可以写帮助类(helper)
 * 根据不同的约定(如方法映射)来判断,只要适用你的项目即可。
 */
function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1;
  case 'DECREMENT':
    return state - 1;
  default:
    return state;
  }
}

// 创建 Redux store 来存放应用的状态。
// API 是 { subscribe, dispatch, getState }。
let store = createStore(counter);

// 可以手动订阅更新,也可以事件绑定到视图层。
store.subscribe(() =>
  console.log(store.getState())
);

// 改变内部 state 惟一方法是 dispatch 一个 action。
// action 可以被序列化,用日记记录和储存下来,后期还可以以回放的方式执行
store.dispatch({ type: 'INCREMENT' });
// 1
store.dispatch({ type: 'INCREMENT' });
// 2
store.dispatch({ type: 'DECREMENT' });
// 1

render(
 //这里我们通过将store传入组件,后续我们即可以通过this.props.store来调用store
  <Counter store={store} />,
  document.querySelector('#root')
)

六、redux中的一些处理

  1. action有可能需要多次调用,为了避免书写麻烦,我们用一个方法来创建并返回一个action,action必须是一个对象,这个方法官方的叫法是actionCreator。 在redux里要更改数据,必须通过reducer来更改,触发reducer的惟一方式是dispatch一个action, 只要dispatch了action,所对应的reducer就会执行,reducer执行之后,state就发生了改变
const add = (num = 1) => {
  return {
    type: 'ADD',
    num
  }
}
const reduce = (num = 1) => {
  return {
    type: 'REDUCE',
    num
  }
}
store.dispatch(add(5))
store.dispatch(reduce(2))

在处理action:type时,如果type值我们写错了,redux也不会报错,他会执行default默认值,这时我们就很尴尬了,所以我们常用的办法时,在action文件夹里创建一个actionType文件,将所有action里要用到的type值,用变量存起来,变量值为字符串即下面的做法,后面我们将type类型用变量引入,加入不存在这个变量的话,就会出现undefined报错

// 定义action的类型

export const ADD = 'ADD';
export const REDUCE = 'REDUCE';

export const START_GET_DATA = 'START_GET_DATA';
export const GET_DATA_SUCCESS = 'GET_DATA_SUCCESS';
// 导入actionType
import {
  ADD,
  REDUCE,
  START_GET_DATA,
  GET_DATA_SUCCESS
} from './actionType';

// ·加· 这个动作的action creator,
export const add = (num = 1) => {
  return {
    type: ADD,
    num
  }
}
  1. 一个store里面不只一个reducer,可能有很多个reducer,这时我们可以把reducer提到一个文件夹单独编写,将每一个reducer的名字取为文件名,然后暴露出去,在从index.js文件里使用redux中combineReducers将所有reducer暴露出去

reducers

import {
  combineReducers
} from 'redux';

import cart from './cart';
// combineReducers 是redux提供的一个方法,用于合并多个reducer
export default combineReducers({
  cart
})

combineReducers使用示例

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Homebrew的安装

    在mac os系统上我们安装程序会用到Homebrew,它是一个包管理工具,相当于linux系统下的yum

    _kyle
  • 关于数组合并及对象去重的问题

    写这篇文章是源于群内的朋友的问题,今天早上,像往常一样摸鱼,发现一个妹子发群里问了一个问题。

    _kyle
  • ps原格式中切出你所需要的图

    点击下图中左边工具栏,移动工具之后,在按住ctrl+鼠标左键选择需要切图的图片,右边即可查看到它所在的图层

    _kyle
  • Redux系列01:从一个简单例子了解action、store、reducer

    本文作者:IMWeb 陈映平 原文出处:IMWeb社区 未经同意,禁止转载 先看例子 其实,redux的核心概念就是store、action、redu...

    IMWeb前端团队
  • Redux系列01:从一个简单例子了解action、store、reducer

    其实,redux的核心概念就是store、action、reducer,从调用关系来看如下所示

    IMWeb前端团队
  • [OHIF-Viewers]医疗数字阅片-医学影像-Module: Panel-自定义面板-中二-Redux&react-redux状态管理详解

    英文原版 https://redux.js.org/ 中文 https://www.redux.org.cn/

    landv
  • redux原来如此简单

    redux是专门为react开发的,但并不是只能用于react,可以用于任何界面库。

    frontoldman
  • [前端]css前端样式的模块化

    陶士涵
  • bootstrap 页面初始化 模板 常用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v...

    用户5760343
  • Flash/Flex学习笔记(4):如何打开网页及Get/Post数据

    flash终究只是客户端技术,所以很多时候还是需要与服务端技术(比如asp,asp.net,jsp,php之类)进行数据交互的,下面的代码演示了如何在flash...

    菩提树下的杨过

扫码关注云+社区

领取腾讯云代金券