redux使用教程

React 专栏收录该内容
14 篇文章 1 订阅

http://www.redux.org.cn

https://github.com/react-guide/redux-tutorial-cn

三大原则

Redux 可以用这三个基本原则来描述:

单一数据源

整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中。

这让同构应用开发变得非常容易。来自服务端的 state 可以在无需编写更多代码的情况下被序列化并注入到客户端中。由于是单一的 state tree ,调试也变得非常容易。在开发中,你可以把应用的 state 保存在本地,从而加快开发速度。此外,受益于单一的 state tree ,以前难以实现的如“撤销/重做”这类功能也变得轻而易举。

console.log(store.getState())

/* 输出
{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}
*/

State 是只读的

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

这样确保了视图和网络请求都不能直接修改 state,相反它们只能表达想要修改的意图。因为所有的修改都被集中化处理,且严格按照一个接一个的顺序执行,因此不用担心 race condition 的出现。 Action 就是普通对象而已,因此它们可以被日志打印、序列化、储存、后期调试或测试时回放出来。

store.dispatch({
  type: 'COMPLETE_TODO',
  index: 1
})

store.dispatch({
  type: 'SET_VISIBILITY_FILTER',
  filter: 'SHOW_COMPLETED'
})

使用纯函数来执行修改

为了描述 action 如何改变 state tree ,你需要编写 reducers

Reducer 只是一些纯函数,它接收先前的 state 和 action,并返回新的 state。刚开始你可以只有一个 reducer,随着应用变大,你可以把它拆成多个小的 reducers,分别独立地操作 state tree 的不同部分,因为 reducer 只是函数,你可以控制它们被调用的顺序,传入附加数据,甚至编写可复用的 reducer 来处理一些通用任务,如分页器。


function visibilityFilter(state = 'SHOW_ALL', action) {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case 'COMPLETE_TODO':
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: true
          })
        }
        return todo
      })
    default:
      return state
  }
}

import { combineReducers, createStore } from 'redux'
let reducer = combineReducers({ visibilityFilter, todos })
let store = createStore(reducer)

 

生态系统

Redux 是一个体小精悍的库,但它相关的内容和 API 都是精挑细选的,足以衍生出丰富的工具集和可扩展的生态系统。

如果需要关于 Redux 所有内容的列表,推荐移步至 Awesome Redux。它包含了示例、样板代码、中间件、工具库,还有很多其它相关内容。要想学习 React 和 Redux ,React/Redux Links 包含了教程和不少有用的资源,Redux Ecosystem Links 则列出了 许多 Redux 相关的库及插件。

本页将只列出由 Redux 维护者审查过的一部分内容。不要因此打消尝试其它工具的信心!整个生态发展得太快,我们没有足够的时间去关注所有内容。建议只把这些当作“内部推荐”,如果你使用 Redux 创建了很酷的内容,不要犹豫,马上发个 PR 吧。

学习 Redux

演示

  • 开始学习 Redux — 向作者学习 Redux 基础知识(30 个免费的教学视频)
  • 学习 Redux — 搭建一个简单的图片应用,简要使用了 Redux、React Router 和 React.js 的核心思想

示例应用

  • 官方示例 — 一些官方示例,涵盖了多种 Redux 技术
  • SoundRedux — 用 Redux 构建的 SoundCloud 客户端
  • grafgiti — 在你的 Github 的 Contributor 页上创建 graffiti
  • React-lego — 如何像积木一样,一块块地扩展你的 Redux 技术栈

教程与文章

演讲

使用 Redux

不同框架绑定

中间件

路由

组件

增强器(Enhancer)

  • redux-batched-subscribe — 针对 store subscribers 的自定义批处理与防跳请求
  • redux-history-transitions — 基于独断的 action 的 history 库转换
  • redux-optimist — 使 action 可稍后提交或撤销
  • redux-optimistic-ui — A reducer enhancer to enable type-agnostic optimistic updates 允许对未知类型进行更新的 reducer 增强器
  • redux-undo — 使 reducer 便捷的重做/撤销,以及 action 记录功能
  • redux-ignore — 通过数组或过滤功能忽略 redux action
  • redux-recycle — 在确定的 action 上重置 redux 的 state
  • redux-batched-actions — 单用户通知去 dispatch 多个 action
  • redux-search — 自动 index 站点资源并实现即时搜索
  • redux-electron-store — Store 增强器, 可同步不同 Electron 进程上的多个 Redux store
  • redux-loop — Sequence effects purely and naturally by returning them from your reducers
  • redux-side-effects — Utilize Generators for declarative yielding of side effects from your pure reducers

工具集

开发者工具

开发者工具监听器

  • Log Monitor — Redux DevTools 默认监听器,提供树状视图
  • Dock Monitor — A resizable and movable dock for Redux DevTools monitors
  • Slider Monitor — Redux DevTools 自定义监听器,可回放被记录的 Redux action
  • Inspector — Redux DevTools 自定义监听器,可筛选、区分 action,深入 state 并监测变化
  • Diff Monitor — 区分不同 action 的 store 变动的 Redux Devtools 监听器
  • Filterable Log Monitor — 树状可筛选视图的 Redux DevTools 监听器
  • Chart Monitor — Redux DevTools 图表监听器
  • Filter Actions — 可筛选 action 、可组合使用的 Redux DevTools 监听器

社区公约

翻译

更多

展开阅读全文
  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 点我我会动 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值