ReactRedux
Redux 教程,该教程源自 Redux中文教程(http://cn.redux.js.org/),我只是大自然的搬运工,感谢Redux中文教程的所有贡献者
dabusidede
Github:https://github.com/IceEmblem,
Word文档文章:https://github.com/IceEmblem/LearningDocuments
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
10 redux Reducer 重构
如下步骤感受Reducer的重构初遇 Reducer最初的reducer看起来如下,如何去重构呢?const initialState = { visibilityFilter : 'SHOW_ALL', todos : []};function appReducer(state = initialState, action) { switch(action.type) { case 'SET_VISIBILITY_FILTER' : {转载 2020-07-18 18:13:51 · 302 阅读 · 0 评论 -
9 redux 搭配 React Router
安装 React Router可以使用 npm 来安装React Router。本教程基于react-router@^2.7.0。npm install --save react-router连接 React Router 和 Redux 应用首先,我们需要从 React Router 中导入<Router/>和<Route/>。代码如下:import{Router,Route,browserHistory }from'react...转载 2020-07-18 18:08:26 · 250 阅读 · 0 评论 -
8 redux Middleware(中间件)
理解 Middleware正因为 middleware 可以完成包括异步 API 调用在内的各种事情。我们将以记录日志和创建崩溃报告为例,引导你体会从分析问题到通过构建 middleware 解决问题的思维过程。问题: 记录日志每次state更新时,如何记录其值尝试 #1: 手动记录letaction =addTodo('Use Redux')console.log('dispatching',action)store.dispatch(action)con...转载 2020-07-18 18:07:25 · 253 阅读 · 0 评论 -
8 redux 异步 Action
阅读本篇文章注意区分 action 和 action 创建函数Action一个异步 API 请求一般使用3个action标识(非必须)1 请求开始的 action。2 请求成功的 action。3 请求失败的 action。为了区分这三种 action,你可以在action 里添加一个专门的status字段作为标记位{type:'FETCH_POSTS'}{type:'FETCH_POSTS',status:'error',error:'Oops...转载 2020-07-18 18:04:16 · 286 阅读 · 0 评论 -
7 redux 三大原则
单一数据源整个应用的state被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个store中。console.log(store.getState())/*输出{visibilityFilter:'SHOW_ALL',todos:[{text:'Consider using Redux',completed:true,},{text...转载 2020-07-18 17:59:10 · 315 阅读 · 0 评论 -
6 redux 搭配 React
安装 React ReduxRedux 默认并不包含React 绑定库,需要单独安装。npm install --save react-redux容器组件和展示组件 展示组件 容器组件 作用 描述如何展现(骨架、样式) 描述如何运行(数据获取、状态更新) 直接使用 Redux 否 是 ...转载 2020-07-18 17:58:17 · 238 阅读 · 0 评论 -
5 redux 数据流
如下4 个步骤描述了redux的state是如何被更新的调用store.dispatch(action)调用store.dispatch(action),将action传给store你可以在任何地方调用store.dispatch(action),Redux store 调用 reducer 函数。store会调用reducer,并传入state 树和 action根 reducer 可能接收到这样的数据:// 当前应用的 stateletprevio...转载 2020-07-18 17:45:04 · 247 阅读 · 0 评论 -
4 redux store
Store 有以下职责:维持应用的 state; 提供getState()方法获取 state; 提供dispatch(action)方法更新 state; 通过subscribe(listener)注册监听器; 通过subscribe(listener)返回的函数注销监听器。根据Reducer创建store根据已有的 reducer 来创建 store 是非常容易的。import{createStore }from'redux'importtodo...转载 2020-07-18 17:44:16 · 267 阅读 · 0 评论 -
3 redux Reducer
Reducers指定了应用状态的变化如何响应actions并更新 state。设计 State 结构在 Redux 应用中,所有的 state 都被保存在一个单一对象中。以 todo 应用为例{visibilityFilter:'SHOW_ALL',todos:[{text:'Consider using Redux',completed:true,},{text:'Ke...转载 2020-07-18 17:42:33 · 280 阅读 · 0 评论 -
2 redux Action
Actionaction是一个对象(object),表示一个任务的描述如下:添加新 todo 任务的 action 是这样的:constADD_TODO ='ADD_TODO'// 如下对象表示一个 actionvar add = {type:ADD_TODO,text:'Build my first Redux app'}我们约定,action 内必须使用一个字符串类型的type字段来表示将要执行的动作类型,除了type字段外,action 对象...转载 2020-07-18 17:40:47 · 231 阅读 · 0 评论 -
1 redux 核心概念
Statestate表示Web应用的状态,用于保存Web应用的数据,todo 应用(示例应用)的 state 可能长这样:{todos:[{text:'Eat food',completed:true},{text:'Exercise',completed:false}],visibilityFilter:'SHOW_COMPLETED'}要想更新 state 中的数据,你需要发起一个 ac...转载 2020-07-17 13:51:52 · 280 阅读 · 0 评论
分享