What is Redux?

[zhouzhongyuan]

• react-
• 理解 React，但不理解 ，该如何通俗易懂的理解 ？ - 知乎
• A cartoon intro to
• A cartoon intro to |中文
• -devtools-extension 非常好用的可视化调试工具

作者说

• javascript - Why use over Facebook Flux? - Stack Overflow
• 只有99行

基本概念

• store
• reducer
• action

概念

• Hot reloading and time travel debugging: what are they?

The Hitchhikers Guide to react-boilerplate(值得再看一遍)

react-boilerplate Core

• React
• React Router
• Saga
• Reselect
• ImmutableJS
• Styled Components

Contents

• 解决了什么痛点？
• 源代码阅读

[zhouzhongyuan]

Redux

Three principles

• Single source of truth
• State is read-only
• Changes are made with pure functions

pure function

阮一峰说

• 不得改写参数
• 不能调用系统 I/O 的API
• 不能调用Date.now()或者Math.random()等不纯的方法，因为每次会得到不一样的结果

他说可能是不全面的，也可能是错的。

store

store = createStore(reducer);

store.subscribe(render);

store.dispatch({type: 'INCREMENT'});

compose

• functions from right to left.
• This is a functional programming utility, and is included in Redux as a convenience.

参考

阮老师的入门教程写的还是挺不错的

• Redux 入门教程（一）：基本用法 - 阮一峰的网络日志
• Redux 入门教程（二）：中间件与异步操作 - 阮一峰的网络日志
• Redux 入门教程（三）：React-Redux 的用法 - 阮一峰的网络日志

[zhouzhongyuan]

redux-saga

side effect model for Redux apps

问题

• 1. Why we need redux-saga?

Intro

• redux-saga是rudex的中间件，好像处理异步action的。
• 依赖generators

Run

In order to run our Saga, we need to:

• create a Saga middleware with a list of Sagas to run (so far we have only one helloSaga)
• connect the Saga middleware to the Redux store

redux-saga/BeginnerTutorial.md at master · redux-saga/redux-saga

Effect

example

• put
• call

. Effects are simple JavaScript objects which contain instructions to be fulfilled by the middleware.put is one example of what we call an Effect.

 yield put({ type: 'INCREMENT' })

Why Do I Need This?

• javascript - How to dispatch a Redux action with a timeout? - Stack Overflow
• Why You Should Use Redux Saga – S-PRO – Medium

For example, we want to implement Notification 5s后自动消失的功能。

Writing Async Code Inline：

store.dispatch({ type: 'SHOW_NOTIFICATION', text: 'You logged in.' })
setTimeout(() => {
  store.dispatch({ type: 'HIDE_NOTIFICATION' })
}, 5000)

Disadvantage：

• It forces you to duplicate this logic anywhere you want to show a notification.
• The notifications have no IDs so you’ll have a race condition if you show two notifications fast enough. When the first timeout finishes, it will dispatch HIDE_NOTIFICATION, erroneously hiding the second notification sooner than after the timeout.

[zhouzhongyuan]

react-redux

Official React bindings for Redux.

问题

１．Provider的作用？
２．Provider只能在顶部使用？
３．Provider只能使用一次？

简介

• 总计700行代码（含注释）
• 本质: 利用react的context，把store传递下去。

API

Provider

• 本质就是一个react的Component
• 此Component含有一个props叫做store

connect

数据绑定: mapStateToProps
事件绑定: mapDispatchToProps

const mapStateToProps = (state, ownProps) => ({
  active: ownProps.filter === state.visibilityFilter
})

const mapDispatchToProps = (dispatch, ownProps) => ({
  onClick: () => {
    dispatch(setVisibilityFilter(ownProps.filter))
  }
})

const FilterLink = connect(
  mapStateToProps,
  mapDispatchToProps
)(Link)

把active和onClick,通过props的方式传给Link.
示例

[zhouzhongyuan]

react-router

Intro

• v4
• reactjs/react-router-redux永远过时了，最新文档

API

Switch

• All children of a should be or elements
• Only the first child to match the current location will be rendered.

Router

The common low-level interface for all router components. Typically apps will use one of the high-level routers instead:
The most common use-case for using the low-level is to synchronize a custom history with a state management lib like Redux or Mobx. Note that this is not required to use state management libs alongside React Router, it’s only for deep integration.

删除了外面包裹的Router之后，store中的state终于正常更新了。
很奇怪，最新文档明明说，use to synchronize history with Redux. 使用Router反而不能正确的更新state。
// TODO 查找原因
我搞错了，我以为我使用的是Router，其实

import {BrowserRouter as Router} from 'react-router-dom';

我使用的是BrowserRouter

route exact

• When true, will only match if the path matches the location.pathname exactly.

[zhouzhongyuan]

reselect: Selector library for Redux

上面的示例中，mapStateToProps 调用了 getVisibleTodos 来计算 todos。运行没问题，但有一个缺点：每当组件更新时都会重新计算 todos。如果 state tree 非常大，或者计算量非常大，每次更新都重新计算可能会带来性能问题。Reselect 能帮你省去这些没必要的重新计算。
我们需要一个可记忆的 selector 来替代这个 getVisibleTodos，只在 state.todos or state.visibilityFilter 变化时重新计算 todos，而在其它部分（非相关）变化时不做计算。
More from docs

[zhouzhongyuan]

styled-components

我打算使用material-ui，而不是styled-components.
Why not change style engine to styled-components · Issue #6115 · callemall/material-ui

[zhouzhongyuan]

redux源代码阅读

基础知识

• 函数式编程

  • currying
  • compose

  from Coding-Guide/Redux入坑进阶-源码解析.md at master · ecmadao/Coding-Guide

目录结构

文件名	作用
createStore.js	创建一个 Redux Store 来放所有的state
combineReducers.js	一个比较大的应用，需要对 reducer 函数 进行拆分，拆分后的每一块独立负责管理state 的一部分
applyMiddlewar.js	使用自定义的 middleware 来扩展 Redux
bindActionCreators.js	把 action creators 转成拥有同名 keys 的对象,使用时可以直接调用
compose.js	从右到左来组合多个函数，函数编程中常用到

utils/warnimng.js|处理警告的，不需要看

——from 史上最全的 Redux 源码分析

[zhouzhongyuan]

redux-thunk

• redux-thunk只有9行