建设ftp网站的安全性,全球外贸网,wordpress修改网页,企业网站带商城源码前言 老外写技术文章真是叼#xff0c;这是国外的一个程序员写的一个简单易懂,循序渐进的Redux教程#xff0c;本着共享的精神#xff0c;就翻译出来给大家一起看#xff0c;文章最后有链接#xff0c;不想看我翻译的直接去看原文吧。 下面是原教程的英文目录 这篇先更三分…前言 老外写技术文章真是叼这是国外的一个程序员写的一个简单易懂,循序渐进的Redux教程本着共享的精神就翻译出来给大家一起看文章最后有链接不想看我翻译的直接去看原文吧。 下面是原教程的英文目录 这篇先更三分之一左右如果小伙伴们喜欢的话我再更剩下的如果没人看我没动力更啊 开始享受你的阅读之旅吧! 本次更新目录 1. 谁适合学习这篇指南2. 你将会学到什么3. 一个小型的React开发环境4. 什么是state5. Redux解决了什么问题6. 为什么你应该学习Redux7. 你应该使用Redux吗8. 开始认识Redux的store9. 开始认识Redux的reducers10. 开始认识Redux的actions正文 当我第一次学习Redux的时候我希望找到最简单的教程。 尽管网上有大量的教程我却依然无法理解Redux的一些概念 我知道什么是state, 但是ations, creators, 和reducers又是什么呢?我对此一头雾水 最重要的是我依然不知道怎么将React和Redux结合起来 这些天我开始写我自己的Redux教程因此我也学到了很多 通过写这个指南我自学了Redux的基础我希望这份教程可以帮助到那些想要学习React和Redux的人 谁适合学习这篇指南 下面的Redux教程正是为这些人准备的 你已经很好地掌握了Javascript, ES6和React你期望用最简单的方式学会Redux你将会学到什么 接下来的指南中你将会学到: 什么是Redux怎样在React中使用Redux一个小型的React开发环境 在开始之前确定你有一个React的开发环境 你可以参照我另外一篇教程如何搭建React, webpack, 和Babel环境, 或者你也可以用create-react-app脚手架来搭建 什么是state 为了理解Redux你必选先理解state 如果你之前使用过React, 那么你对state这个术语就不会陌生了 比如你之前已经写过类似于下面的有状态的React组件 import React, { Component } from react;
class ExampleComponent extends Component {constructor() {super();this.state {articles: [{ title: React Redux Tutorial for Beginners, id: 1 },{ title: Redux e React: cosè Redux e come usarlo con React, id: 2 }]};}render() {const { articles } this.state;return ul{articles.map(el li key{el.id}{el.title}/li)}/ul;}
}
复制代码一个有状态的React组件是一个javascrit的ES6的类class 每个有状态的React组件有它自己的状态 在React组件中状态state管理数据组件可能将数据渲染显示给用户 状态在响应行为和事件的时候可能会发生变化 在React中组件可以通过setState更新自己的状态 但是状态到底是什么这个术语state并没有绑定在React中状态一直在你身边即使最简单的JavaScript应用都有状态考虑下面的例子 用户点击了一个按钮 最上层出现了一个弹框 看看在这个微不足道的交互中就有一个状态我们必须处理 我们可以用一个JavaScript 对象来描述初始状态 var state {buttonClicked: no,modalOpen: no
}
复制代码当用户点击按钮之后这个对象就变成了 var state {buttonClicked: yes,modalOpen: yes
}
复制代码除了将这些状态储存在一个对象中你如何跟踪JavaScript的这些状态是否有一个库可以帮我们更可靠地追踪这些状态 Redux解决了什么问题 一个典型的Javascript应用充满了状态 例如 用户看到了什么data我们在获取什么数据我们展示给用户的url是什么在页面里面选中了哪些条目应用中是否有错误这个也是状态状态在Javascript中无处不在 你可以想象一下一个React应用有多少状态吗 当然只要你的应用一直保持很小你可以用一个父组件来维持这些状态但是当你给你的应用添加更多行为的时候事情就变得棘手了。 有时候我们可能希望持续地跟踪并且获取到状态的变化但是前端开发者不应该处理这个业务逻辑 所以还有什么可选方案来管理React组件的状态呢 ** Redux**就是其中之一 Redux解决了一个刚开始的时候可能不那么明显的难题它给了每个React组件所需要的状态 Redux在一个地方维持状态 当然使用Redux, 获取和管理状态就独立于React之外了, 这种方式的好处刚开始可能不是那么明显当你越来越了解Redux的时候好处就会变得越来越清晰 接下来我们来看看你为什么应该学习Redux以及什么时候应该在你的应用中使用Redux首先先来了解为什么你应该学习Redux 为什么你应该学习Redux 你是否想学习Redux但是却不知从何学起Redux让大多数开始学习的人望而却步但是你不应该被吓到Redux并没有那么难关键是不要急着去学Redux除非你对此有目标和热情你才应该开始学习它 别着急 我开始学习Redux是因为 我有百分百的兴趣了解Redux的工作原理我迫切地希望提高我的React技能React和Redux结合是十分普遍的Redux是通用独立的框架一旦学会了可以到处使用(vue, Angular)那么Redux是一个好的汇报吗状态遍布在Javascript应用中所以状态管理在JavaScript 中一直是个未解决的难题 另一个事实就是真正的JavaScript应用大多数都是使用状态管理库 那么Redux在未来会消失吗 有这种可能但是这种模式将会长存它对你前端开发事业极为宝贵 最后学习Redux或者相关的状态管理库是必须的即使学习曲线很陡峭 你应该使用Redux吗 使用Redux,Flux或者Mobx来管理状态完全取决于你 可能你根本不需要这些库使用它们的代价就是他们在你的应用中加了一层抽象 但是我更倾向于认为Redux是一个有用的投资而不是成本 另外一个开始学习Redux的人常见的问题就是怎么知道什么时候你的应用需要使用Redux 如果你认为没有不二法则来确定你什么时候需要使用Redux来管理状态 Redux也给JavaScript开发者提供了很多便利 调试action重放等等 当我开始一个React项目的时候我总是控制不住直接将Redux加入到项目中但是作为开发者我们可能就会让代码臃肿了 所以什么时候你猜应该将Redux添加到你的项目中 在挑选Redux之前先花点时间来探索下可选的模式 特别是需要深入理解React的state和props Dave Ceddia有一篇很好的文章children props as an alternative before reaching for Redux里面有很多关于用子组件的props来作为Redux代替方案的见解 不要忘记就算之后添加了Redux , React项目也可以很容易地被重构 我总结的你需要考虑使用Redux的情况如下 很多React组件需要获取同样的状态但是没有任何父子关系用props一层层往下传递状态给多个组件 让你棘手了不用担心如果上面的情况对你没有任何意义Dan Abramov曾经说过“Flux就是眼镜一样当你需要他们的时候你会知道的” 在进一步深入之前你需要花店时间理解Redux解决了什么问题以及你是否有动力去学习它 注意Redux对小型应用没有那么游泳在大型应用中它才会大放光彩无论如何 即使你当前不是在开发大型应用学习Redux也不会有坏处 接下来我们将开始介绍一些概念 Redux基本原则Redux和React结合再一次重申确定你搭建好了React的开发环境你可以跟着 How to set up React, webpack, and Babel这个教程来或者使用create-react-app脚手架来搭建 开始认识Redux的store Actions, Reducers,我对这些还是有几分了解的但是有件事我不明白这些东西是怎么聚合在一起的 在Redux中store精心安排了所有的东西和我重复一遍store store对于Redux来说就像人的大脑一样它是某种魔法 Redux的store是根基性的东西整个应用的状态存在store之中 转到你的React开发环境安装Redux: npm i redux --save-dev
复制代码为store创建一个目录 mkdir -p src/js/store
复制代码在src/js/store中创建一个新文件index.js初始化store // src/js/store/index.js
import { createStore } from redux;
import rootReducer from ../reducers/index;
const store createStore(rootReducer);
export default store;
复制代码从上面的代码你可以看出store是createStore的返回结果createStore是一个函数来自redux库 createStore接受一个reducer作为第一个参数因此我们传递了rootReducer 你也可以传递一个初始的state给createStore 这对服务端渲染有用但是现在我们不必关心这个 最重要的概念就是redux的state来自于reducers,我们再说的清楚点reducers产生你应用的状态 了解了这个我们可以继续学习我们的第一个Redux reducer了 开始认识Redux的reducers 尽管初始的state对服务端渲染有用在Redux中state必须从reducers中返回 那么什么是reducer呢 一个reducer是一个JavaScript函数一个reducer函数接收两个参数 当前的state和一个action(马上我们会介绍更多关于action的东西) 在一个平常的React组件中本地的状态变化是通过setState来改变的 然而在Redux中你不可以这么做。 Redux的第三个原则是state是不可变的并且不能改变他们 这就是为什么reducer必须是纯函数一个纯函数是对于一个特定输入总是会返回同样输出的函数 创建一个reducer并不难它仅仅是一个有两个参数的JavaScript函数 在我们的示例中我们将会创建一个简单的reducer,它接受初始的state作为第一个参数至于第二个参数我们提供一个action,现在reducer除了返回初始的state什么都不会做 为根reducer创建一个目录 mkdir -p src/js/reducers
复制代码接着在src/js/reducers里面创建一个index.js文件 // src/js/reducers/index.js
const initialState {articles: []
};
function rootReducer(state initialState, action) {return state;
};
export default rootReducer;
复制代码我承诺保证这篇指南尽可能地简单这就是为什么我们的第一个reducer很傻了它返回初始的state除此之外就什么都没做了 注意初始的state是怎么作为一个默认参数传递的 在接下来的章节中我们将在里面添加一个action 在这里事情就会变得有趣了 开始认识Redux的actions 毫无疑问reducers是Redux最重要的概念**reducers产生应用的状态** 但是一个reducer是怎么知道什么时候产生下一个状态呢 Redux的第二个原则就是改变的状态的唯一方法是发送信号给store, 这个信号就是一个action, 派发action就是一个发送信号的过程 现在你怎么改变一个不可变的state,你做不到的新产生的state是当前state添加了新数据后的一个副本前一个state根本没发生变化 这就是你需要知道的东西 要明白Redux的action仅仅是JavaScript对象下面是一个action {type: ADD_ARTICLE,payload: { title: React Redux Tutorial, id: 1 }
}
复制代码每个action需要一个type属性来描述状态怎样变化 你也可以申明一个payload,在上面的例子中payload是一个新文章article随后一个reducer将会将这个新文章添加到当前的state 最佳的实践是在一个函数里面包裹每个action, 这种函数就叫action creator 现在通过创建一个简单的Redux 的action,我们可以把所有的东西都整合在一起了 为actions创建一个目录 mkdir -p src/js/actions
复制代码然后在这个目录里面创建index.js文件 // src/js/actions/index.js
export function addArticle(payload) {return { type: ADD_ARTICLE, payload }
};
复制代码type属性仅仅是一个字符串而已 reducer将会使用这个字符串来确定怎么计算出下一个state 由于字符串很容易打印出错和重复因此将action的type申明为常量更好 这种方式可以避免很难调试的错误 创建一个新目录 mkdir -p src/js/constants
复制代码然后在这个目录里面创建一个action-types.js文件 // src/js/constants/action-types.js
export const ADD_ARTICLE ADD_ARTICLE;
复制代码现在打开src/js/actions/index.js 并且使用action types来更新action import { ADD_ARTICLE } from ../constants/action-types;
export function addArticle(payload) {return { type: ADD_ARTICLE, payload };
}
复制代码我们还差一步就可以拥有一个可以运行的Redux应用了让我们来重构我们的reducer 华丽的风格线哈哈 本篇内容翻译完毕溜了肚子饿的呱呱叫了。 附上原文链接 www.valentinog.com/blog/redux/ 转载于:https://juejin.im/post/5cd68669518825690233ccf9
