Redux

我从学react起,一共写了三次react项目
第一次是学生选课系统,完全不知道生命周期的规律和顺序,也不知道axios到底应该放在哪里才能更好的请求到,文件分工不明确,没有体现组件化的优势,各处state异常混乱,完全定位不到错误位置。
第二次是研究生双选导师的系统,由于时间原因,很多的组件、方法都是堆积在一个js文件中,单个文件过于臃肿,且大部分方法都是上一次的方法照搬。优点是明确了各生命周期该干的事情,且明白了当系统慢慢扩展,慢慢变大时,普通的state渲染界面的缺陷就会逐渐暴露而出,状态管理几乎是所有bug的根源之处:

一、排错困难:当出现问题的时候,难以定位到错误位置,组件嵌套组件,不知道到底是传进去的时候出现的错误,还是在子组件某一生命周期出现的错误。

二、过多嵌套的state,让开发者对于数据逻辑的混乱无所适从。

redux就是为此而生的一种技术,它使用单一的state仓库(store)来保存数据,修改其中数据只能通过动作(action)来进行,拿出来的数据只能可读不可修改,保证了开发者对数据的修改都在同一位置,不会出现各生命周期各有一堆请求数据的代码的情况。

第三次就是我现在正在写的餐厅管理系统,新使用的技术就是redux,使用前觉得,怎么会有这么麻烦的东西?修改还要通过动作,还不如我直接setState呢,还只有一个仓库来存state,我每个界面一个state不好吗?但是使用后才会发现,Redux很像是一个矫正工具,让你保证单项的数据流流入单一位置,再只从这个仓库取出数据。redux中修改数据的代码就像下方我举的例子

 const action = changeHeadColor(index);
store.dispatch(action);
changeHeadColor这个方法返回一个对象,对象中一定有一个type属性,这个属性可以看作是方法名或者是钥匙,当你想去仓库中修改数据,你就需要这把钥匙去打开相应的门。
 export const changeHeadColor = (index) => ({
type: CHANGE_HEAD_COLOR,
index
})

然后就是我们的仓库了,这个文件我们专门用来储存state。所以我们修改state的方法很明确了,通过调用action(动作),找到对应的reducer(操作仓库的方法),通过这个纯函数来修改state,且只有这种方式才能改变state

const defaultState = {
headActiveColorIndex: 0
};
export default (state = defaultState, action) => {
let newState;
switch (action.type) {
case CHANGE_HEAD_COLOR:
newState = JSON.parse(JSON.stringify(state));//深度拷贝
newState.headActiveColorIndex = action.index;
return newState;
}
return state;
}

接下来我就将需要建立的文件初步给大家展示一下。大概需要的文件是四个,外加一个使用的组件文件。

store.js

// 记得安装redux 和 redux-thunk(中间件,后面会讲)
import { createStore, applyMiddleware, compose } from 'redux';
import reducer from './reducer'
import thunk from 'redux-thunk' //增强函数 一步方法,执行两个函数
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose; //中间件
const enhancer = composeEnhancers(applyMiddleware(thunk)); const store = createStore(
reducer, /* preloadedState, */
enhancer
); export default store;

actionType.js

// 单独拿出一个文件用于定义action的typeheaction本身的名字,这样做的意想不到的好处是,当你输入type名错了的时候,是会出现报错的,而不写这个文件的话,reducer文件判断type处会以为你有这个变量,作为一个判断条件一直放在那里,并不会报错。报错有利于你处理BUG
// 改变顶部导航栏背景颜色
export const CHANGE_HEAD_COLOR = 'changeHeadColor';

actionCreators.js

 import { CHANGE_HEAD_COLOR} from './actionTypes'

 export const changeHeadColor = (index) => ({
type: CHANGE_HEAD_COLOR,
index
})

reducer.js

import { CHANGE_HEAD_COLOR } from './actionTypes'

const defaultState = {
headActiveColorIndex: 0,
tableList: []
}; export default (state = defaultState, action) => {
let newState;
switch (action.type) {
case CHANGE_HEAD_COLOR:
newState = JSON.parse(JSON.stringify(state));//深度拷贝
newState.headActiveColorIndex = action.index;
return newState;
}
return state;
}

head.js => 组件文件

import React, { Component } from 'react'
import store from '../store'
import { changeHeadColor } from '../store/actionCreators' class Head extends Component {
constructor(props) {
super(props);
this.state = store.getState()
// 订阅 发生改变就修改视图
store.subscribe(this.storeChange.bind(this));
}
componentDidMount() {
const action = changeHeadColor(10)
store.dispatch(action)
}
render() {
let { headActiveColorIndex } = this.state;
return (
<div className="head">
{headActiveColorIndex }
</div>
<div onClick={this.testFun.bind(this)}>测试</div>
)
}
testFun(){
const action = changeHeadColor(1000)
store.dispatch(action)
}
storeChange() {
this.setState(store.getState())
}
} export default Head

文件结构如下,大家使用的时候建议按照自己的路径重打一下路径,比如我这里就是因为全放在了一个store文件夹下,所以store.js文件改名成了index.js

然后大家就可以尝试使用redux做项目了,这里再提醒一点,如果大家没有认为或是没有意识到自己的react项目的状态管理混乱的话,redux是没有必要使用的。

这里引用阮一峰老师的文章的话:

     "如果你不知道是否需要 Redux,那就是不需要它。"

今天就到这里,鉴于篇幅的问题没有办法说得更多,如果有其他问题的话可以加我的qq或私信我或留下您的信息,我看到了会尽我的能力给大家解答。希望大家的项目少出BUG!下次更新再见啦。


redux的简单使用的更多相关文章

  1. redux 的简单实用案例

    redux 的简单实用案例 整体思想与结构 创建一个Action 创建一个Reducer 创建Store 在App组件开始使用 整体思想与结构 文件目录如下: 构建 action,通过创建一个函数,然 ...

  2. React之 redux 的简单介绍及使用

    1.为什么使用redux?在小型react项目的开发中 ,view(视图层)中的数据模型(即数据),可以存放在组件中的 state 对象,换句话说页面中的动态数据存放在 state 中. 但对于开发大 ...

  3. TypeScript + React + Redux 实战简单天气APP全套完整项目

    下载链接:https://www.yinxiangit.com/171.html 目录: 从面向过程的js到面向对象的js,让web前端更加高大尚.让你的前端步步日上,紧跟技术发展的前沿.让你构建更加 ...

  4. 初学redux笔记,及一个最简单的redux实例

    categories: 笔记 tags: react redux 前端框架 把初学redux的一些笔记写了下来 分享一个入学redux很合适的demo, 用redux实现计数器 这是从阮一峰老师git ...

  5. 【原】redux学习笔记

    上周学习了flux,这周研究了一下redux,其实很早之前都已经在研究他们了,只是之前一直没搞懂,最近这两周可能打通了任督二脉,都算入门了. 写博客的目的主要是做一下笔记,总结一下思路,以及和大家交流 ...

  6. 使用Redux管理你的React应用

    因为redux和react的版本更新的比较频繁,博客园这里用的redux版本是1.0.1,如果你关心最新版本的使用技巧,欢迎来我的Github查看(https://github.com/matthew ...

  7. 如何理解 Redux?

    作者:Wang Namelos 链接:https://www.zhihu.com/question/41312576/answer/90782136 来源:知乎 著作权归作者所有,转载请联系作者获得授 ...

  8. Redux管理你的React应用

    使用Redux管理你的React应用   因为redux和react的版本更新的比较频繁,博客园这里用的redux版本是1.0.1,如果你关心最新版本的使用技巧,欢迎来我的Github查看(https ...

  9. Flux --> Redux --> Redux React 入门

    本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推 ...

随机推荐

  1. windows下搭建syslog服务器及基本配置

    一.环境 windows7 64位+ kiwi_syslog_server_9.5.0 kiwi_syslog百度云下载地址: 链接: https://pan.baidu.com/s/1EpPBNsL ...

  2. P3195 [HNOI2008]玩具装箱TOY 斜率优化dp

    传送门:https://www.luogu.org/problem/P3195 题目描述 P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行压缩,其可以将任 ...

  3. (四)Lock,ReentrantLock,ReentrantReadWriteLock类的使用以及相关api---synchronized进阶

    这篇博客记录了Lock,ReentrantLock,ReentrantReadWriteLock类的使用以及其一些api: 码字不易~~另外<java多线程编程核心技术>这本书读着很爽 前 ...

  4. Hive 窗口分析函数

    1.窗口函数 1.LAG(col,n,DEFAULT) 用于统计窗口内往上第n行值 第一个参数为列名,第二个参数为往上第n行(可选,默认为1),第三个参数为默认值(当往上第n行为NULL时候,取默认值 ...

  5. Redis|Sentinel 高可用架构

    一 前言 Redis-Sentinel是Redis官方推荐的高可用性(HA)解决方案,当用Redis做Master-slave的高可用方案时,假如master宕机了,Redis本身(包括它的很多客户端 ...

  6. CTPN

    1. https://zhuanlan.zhihu.com/p/34757009  (原理) 2. https://www.jianshu.com/p/471bdbd0170d (bi-LSTM)

  7. deepin 15.11 成功安装 jupyter notebook

    系统环境: OS:deepin 15.11(均为系统默认配置) Anaconda Distribution 64位(x86)安装程序(517 MB) Jupyter 官方提供三种安装方式:conda. ...

  8. 如何比较装X地回答问题 | 面试系列.1

    公众号后台比较多同学让我写面试相关的文章,在<从面试官的角度谈谈大数据面试>也聊了很多,但是有同学吐槽说我没有把答案写上去,当时我的心里是拒绝写的,这有啥好写的,又不难,Google一大堆 ...

  9. Docker学习总结(六)--Dockerfile

    什么是 Dockerfile Dockerfile 是由一系列命令和参数构成的脚本,这些命令应用于基础镜像并最终创建一个新的镜像. 对于开发人员:可以为开发团队提供一个完全一致的开发环境; 对于测试人 ...

  10. Codeforces 985E

    题意略. 思路: 这个题目开始想的有点暴力,后来发现有搜索的性质,因此转而用动态规划.首先,我们要把这些数排个序. 定义状态:dp[i]为排序后i~n能否成功打包,1表示可以,0表示不能打包. 状态转 ...