Redux可以简单概况为:将需要修改的state都存入到store里,发起一个action用来描述发生了什么,用reducers描述action如何改变state tree 。创建store的时候需要传入reducer,真正能改变store中数据的是store.dispatch API。

1. Redux使用场景

  1. 某个组件的状态,需要共享
  2. 不同组件之间通信

2. Redux 特点

2.1 Store

store是一个数据仓库,一个应用中store是唯一的,它里面封装了state状态,当用户想访问state的时候,只能通过store.getState()来取得state对象。

2.2 action

action描述了一个更新state的动作,它是一个对象,其中type属性是必须有的,它指定了某动作和要修改的值:

{
type: CHANGE_INPUT_VALUE,
value: 'abc'
}

2.3 actionCreator

actionCreator 是一个方法,用来创建action对象,调用这个方法就能返回一个action对象,用于简化代码

2.4 dispatch

dispatch 是一个方法,它用于派发一个动作action,这是唯一的一个能够修改state的方法,它内部会调用reducer来调用不同的逻辑基于旧的state来更新出一个新的state。

2.5 reducer

reducer是更新state的核心,它里面封装了更新state的逻辑,reducer由外界提供(封装业务逻辑,在createStore时传入),并传入旧state对象和action,将新值更新到旧的state对象上返回。

3. Redux 三大原则

3.1 单一数据源

整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中。组件通过如下方式取出state中数据:

console.log(store.getState())

3.2 State 是只读的

唯一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象。

store.dispatch({
type: 'CHANGE_INPUT_VALUE',
value: 'abc'
})

3.3 使用纯函数来执行修改 reducers

为了描述 action 如何改变 state tree ,你需要编写 reducers。Reducer 只是一些纯函数,它接收先前的 state 和 action,并返回新的 state。

const defaultState = { // 默认一个state
inputValue: 'abc',
list: [1,2,3]
}; export default (state = defaultState, action) => {
console.log(state, action);
if (action.type === 'CHANGE_INPUT_VALUE') {
let newState = JSON.parse(JSON.stringify(state)); // 深拷贝一份state
newState.inputValue = action.value; // 更改拷贝后的state
return newState; // 将更新后的新的state 返回给 store
}
return state;
}

4 示例应用 - Todolist

入口文件 /src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Todolist from './Todolist'; ReactDOM.render(<Todolist />, document.getElementById('root'));

新建文件 src/Todolist.js

import React, { Component, Fragment } from 'react'; 

class TodoList extends Component {

  render() {
return (
<Fragment>
<div style={{padding: '10px'}}>
todolist
</div>
</Fragment>
)
}
} export default TodoList;

4.1 创建 store

新建目录: /src/store

4.2 store 入口文件

创建文件:/src/store/index.js:

import { createStore } from 'redux'
import reducer from './reducer' const store = createStore(reducer) export default store

4.3 统一定义action.type

新建文件:/src/store/actionType.js,

export const CHANGE_INPUT_VALUE = 'change_input_value';  // 更改input处输入框里面的值
export const ADD_TOTO_ITEM = 'add_todo_item'; // 添加待办事项
export const DELETE_TODO_ITEM = 'detete_todo_item'; // 删除待办事项

4.4 创建action对象

新建文件:/src/store/actionCreator.js

// 引入 actionType 模块
import {
CHANGE_INPUT_VALUE,
ADD_TOTO_ITEM,
DELETE_TODO_ITEM,
} from './actionType' // 更改input处输入框里面的值
export const getInputChangeAction = (value) => {
return {
type: CHANGE_INPUT_VALUE,
value
}
} // 添加待办事项
export const getAddItemAction = () => {
return {
type: ADD_TOTO_ITEM
}
} // 删除待办事项
export const getDeleteItemAction = (index) => {
return {
type: DELETE_TODO_ITEM,
index
}
}

4.5 reducer 更新 state

新建文件:/src/store/reducer.js

import {
CHANGE_INPUT_VALUE,
ADD_TOTO_ITEM,
DELETE_TODO_ITEM,
} from './actionType' const defaultState = { // 默认一个state
inputValue: 'abc',
list: [1,2,3]
}; // 注意:reducer 可以接收state, 但是不允许修改state,所以需要深拷贝一份state
export default (state = defaultState, action) => {
console.log(state, action);
if (action.type === CHANGE_INPUT_VALUE) {
let newState = JSON.parse(JSON.stringify(state)); // 深拷贝一份state
newState.inputValue = action.value; // 更改拷贝后的state
return newState; // 将更新后的新的state 返回给 store
}
if (action.type === ADD_TOTO_ITEM) {
let newState = JSON.parse(JSON.stringify(state));
newState.list.push(newState.inputValue);
newState.inputValue = '';
return newState;
}
if (action.type === DELETE_TODO_ITEM) {
let newState = JSON.parse(JSON.stringify(state));
newState.list.splice(action.index, 1); // 删除当前index的item
return newState;
}
return state;
}

4.6 修改 src/Todolist.js

import React, { Component, Fragment } from 'react';
import "antd/dist/antd.css";
import { Input, Button, List } from 'antd';
import store from './store/index';
import { getInputChangeAction, getAddItemAction, getDeleteItemAction } from './store/actionCreators'; class TodoList extends Component { constructor(props) {
super(props); this.state = store.getState(); this.handleInputChange = this.handleInputChange.bind(this);
this.handleBtnClick = this.handleBtnClick.bind(this); this.handleStoreChange = this.handleStoreChange.bind(this);
// 订阅store,只要store中state有变化,就执行handleStoreState函数
store.subscribe(this.handleStoreChange);
} handleInputChange (e) {
const action = getInputChangeAction(e.target.value); // 将需要执行的action传给store
store.dispatch(action);
} handleBtnClick () {
const action = getAddItemAction();
store.dispatch(action);
} handleItemDelete (index) {
const action = getDeleteItemAction(index);
store.dispatch(action);
} handleStoreChange () {
// 当store中state变化时,则重新取一次数据进行替换
this.setState(store.getState());
} render() {
return (
<Fragment>
<div style={{padding: '10px'}}>
<div>
<Input
value={this.state.inputValue}
placeholder="input something"
style={{width: '300px',marginRight: '10px'}}
onChange={this.handleInputChange}
/>
<Button type="primary" onClick={this.handleBtnClick}>提交</Button>
</div>
<List
style={{marginTop: '10px', width: '300px'}}
bordered
dataSource={this.state.list}
renderItem={
(item, index) => <List.Item onClick={this.handleItemDelete.bind(this, index)}>{item}</List.Item>
}
/>
</div>
</Fragment>
)
}
} export default TodoList;

5 项目目录

React 之 Redux 的使用的更多相关文章

  1. 实例讲解react+react-router+redux

    前言 总括: 本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应 ...

  2. 基于 React.js + Redux + Bootstrap 的 Ruby China 示例 (转)

    一直学 REACT + METEOR 但路由部分有点问题,参考一下:基于 React.js + Redux + Bootstrap 的 Ruby China 示例 http://react-china ...

  3. 基于react+react-router+redux+socket.io+koa开发一个聊天室

    最近练手开发了一个项目,是一个聊天室应用.项目虽不大,但是使用到了react, react-router, redux, socket.io,后端开发使用了koa,算是一个比较综合性的案例,很多概念和 ...

  4. 最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)

    请表明转载链接: 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊 ...

  5. 【前端】react and redux教程学习实践,浅显易懂的实践学习方法。

    前言 前几天,我在博文[前端]一步一步使用webpack+react+scss脚手架重构项目 中搭建了一个react开发环境.然而在实际的开发过程中,或者是在对源码的理解中,感受到react中用的最多 ...

  6. 【前端,干货】react and redux教程学习实践(二)。

    前言 这篇博文接 [前端]react and redux教程学习实践,浅显易懂的实践学习方法. ,上一篇简略的做了一个redux的初级demo,今天深入的学习了一些新的.有用的,可以在生产项目中使用的 ...

  7. [React] 14 - Redux: Redux Saga

    Ref: Build Real App with React #14: Redux Saga Ref: 聊一聊 redux 异步流之 redux-saga  [入门] Ref: 从redux-thun ...

  8. [React] 15 - Redux: practice IM

    本篇属于私人笔记. client 引导部分 一.assets: 音频,图片,字体 ├── assets │ ├── audios │ ├── fonts │ └── images 二.main&quo ...

  9. react脚手架改造(react/react-router/redux/eslint/karam/immutable/es6/webpack/Redux DevTools)

    公司突然组织需要重新搭建一个基于node的论坛系统,前端采用react,上网找了一些脚手架,或多或少不能满足自己的需求,最终在基于YeoMan的react脚手架generator-react-webp ...

  10. React 与 Redux 在生产环境中的实践总结

    React 与 Redux 在生产环境中的实践总结 前段时间使用 React 与 Redux 重构了我们360netlab 的 开放数据平台.现将其中一些技术实践经验总结如下: Universal 渲 ...

随机推荐

  1. ESA2GJK1DH1K升级篇: STM32远程乒乓升级,基于(GPRS模块AT指令TCP透传方式),定时访问升级(兼容Air202,SIM800)

    实现功能概要 单片机定时使用http访问云端的程序版本, 如果版本不一致,然后通过http下载最新的升级文件,实现远程升级STM32. 兼容Air202,SIM800 测试准备工作(默认访问我的服务器 ...

  2. vue之父子组件通信

    一. 父-子组件间通信 let children={    template:`<div><h1>{{send}}</h1></div>`,  # 将传 ...

  3. 【JZOJ100207】【20190705】决心

    题目 你需要构造一个排列 初始时\(p_i=i\),一次操作定义为: 选择一些\((x_i,y_i)\),满足每个数字只能出现一次 依次交换\(p_{x_i},p_{y_i}\) 定义一个排列 \(P ...

  4. 使用Swagger2构建SpringMVC项目中的Restful API文档

    使用Swagger自动生成API文档,不仅增加了项目的可维护性,还提高了API的透明度更利于快速测试等工作,便于更快地发现和解决问题. 本篇文章只记录整合过程,关于Security Configura ...

  5. Android Studio 之 GridView

    1. 数据源 ArrayList Cursor 2. 适配器 Adapter ArrayAdapter SmipleAdapter SmipleCursorAdapter BaseAdapter

  6. springboot自定义页面拦截

    项目结构图 页面拦截代码 @Configuration public class WebConfig implements WebMvcConfigurer { @Override public vo ...

  7. 京东联盟开发(6)——推广链接解析SKUID

    1.从推广方案中分析出价格及推广码 $keyword = " [京东]长虹(CHANGHONG) L3 老人手机 移动/联通2G 老年机 双卡双待 咖啡 原价:168.00元 券后价:163 ...

  8. CentOS安装PinPoint

    1.软件准备 jdk-8u191-linux-x64.tar.gz,下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8 ...

  9. Selenium基础教程(三)自动化插件Katalon

    Katalon-一款好用的selenium自动化测试插件 Selenium 框架是目前使用较广泛的开源自动化框架,一款好的.基于界面的录制工具对于初学者来说可以快速入门:对于老手来说可以提高开发自动化 ...

  10. failed to open stream: operation failed

    # composer require oygza/aliyun-php-sdk-afs You are running composer with xdebug enabled. This has a ...