redux中的state可以看作Functor吗？

[adispring]

state可以看作包含状态的容器，在reducer中可以对状态做变换，那么这是否可以看作是Functor呢？

[Qquanwei]

显然不是。

state 只是一个纯对象。

@adispring 如果你的意思是 store 可不可以看作Functor , 那么很显然，也不是。

因为不满足Functor定义

fantasyland/fantasy-land

[leo19920823]

广义上讲，任何的js中的Object都是Functor

如果单独考察state的实现是否使用了Functor的思想，不是；

[phpsmarter]

state 只是一个单纯的 js 对象. 这个好多人搞不明白. Redux 构架之下, 组件可以基本没有自己的state, 对应部分都在 state 对象树中, 组件也没有自己的方法,方法也是有 Redux管理. js 中,函数式传名赋值的, 组件没有自己定义的方法, 这其实就是词法作用域, 因为 action 是定义在 Redux中的, 组件只是引用了函数.

Redux 的容器之说从何而来, 是由于 connect 的存在, connect 可以选择性的映射,通过mapStateToProps 选择 state 树的一部分 注入到组件中, 这个地方其实就是去毛的过程.
Redux 的方法也是通过 类似的传递了 disptch 方法的引用.

你想象在用一个遥控器, 你按键时, 并没直接作用于电路, 工作的电路(操作方法)是在电视里.
不知道你们见过有画中画功能的电视 ,就是一个小画面显示的图像和大画面不同, 实际上就是选择性投射到小屏幕上.

很多人认为, 组件为了操作自身的状态,要点击自己的方法,然后在 Redux里转一圈,改变了 state,然后再返回组件 . 真是多此一举, 其实是组件自己根本没有操作自己的函数和 state, 操作的都是 Redux 的方法和 state. 这才是真正的单向数据流动.

组件需要引用或者映射一部分 state,以及 dispatch 方法. 这才有 container .

state本身并不是一个容器

[phpsmarter]

我都觉得遥控电视这个类比太贴切了.

在遥控器,我们发出的只是指令,就是通知 电视要怎么工作.
在组件中,我们分发一个函数名, 就是通知 Redux要执行这个函数, 真正的函数是 Redux 定义的.

当我们发的指令不同, 电视会投射给我们不同的内容
在组件中,我们分发的指令不同, Redux也会呈现出不同的内容,

那么假如我们有一个万能的遥控器, 可以控制所有的电器,

那么就可以 控制 空调到24度, 电视放到 cctv5, 灯光放到暗一点. 空调需要知道电视转到 cctv5的信息吗?不需要,所以 空调只选择接受温度控制信息, 电视只接受换台信息, 灯只接受明暗信息.

这里的空调,电视, 灯 就是容器 ,这个容器装什么, 就是装的选择性的信息(part of state).

[phpsmarter]

那么 人和 电视, 空调, 灯是什么关系? 人也是组件, 人这个组件要想控制其他组件的功能怎么办?

发送指令给 遥控器,遥控器负责指挥 电视, 空调,灯的行为.

通过遥控器就解决了组件之间交互的问题. 这个地方就是 Redux 着力要解决的问题.

[sunflower]

分析的很透切。
我也在用 react + redux 的路上，有空多向您求教。

[sunflower]

弱弱问一个和题目不相关的问题：@adispring 别怪哈

大家 使用 redux 时， 异步数据 使用的哪种解决方案？

[adispring]

我们这边使用的是 redux-thunk

[Qquanwei]

一般的异步场景用的最多的应该是redux-thunk了吧。
另外redux-observable redux-saga 也有人用，不过这种是更加复杂的异步场景中才会用到。

[phpsmarter]

哈哈! 刚好看到一篇文章讲这个问题. 目前为止看到的对于 Redux 数据流最完美的图
When do I know I’m ready for Redux?

要点:

• ① Redux的单向数据流. 数据只从 Redux=>component. 其实 Redux 也是一个 React 组件, 这个组件的state有特殊的意义. 处理的数据把它转变为 props 就可以传递给子组件了. 这个做法就是 React 的标准模式. 所以如果有一个根本性的问题, Redux到底是什么? 它其实也是一个 React 的组件.
• ② 组件的 dispatch 操作, 并没有真正的操作组件里的函数, 只是通过引用赋值,调用了 Redux中定义的 action 函数, 所以这幅图中从组件到Redux并没有直接相连. 这里阐述的很好. 传统的哪一张图, 从组件到 Redux 的 store 的箭头 误导了很多人. 组件通过遥控(远程)调用 Redux 的函数(action),改变 Redux中的 state 的对象, (prevState,action)=>nextState, 这个变化怎么在组件中体现, 在 React最常见的途径就是 父组件通过 props 自顶向下传递数据. 但是在 Redux这个特殊的 React组件内部, 数据的形式是 State,所以需要在向其他组件传递时,做出转换, 这就是 connect 中mapStateToProps存在的意义, 函数名很好的说明了这个问题.

[sunflower]

收到。我觉得 thunk 的确日常就够用了。

[adispring]

我们将 xhr-request 注入到了 redux-thunk 的 extraArgument 里面了，xhr-request 会返回一个 promise，所以请求操作可以像下面这样使用：

const type = ...;
export const fetchData = (url query) => async (dispatch, getState, { request }) => {
  const body = await request(url, query);
  R.compose(
    payload => dispatch({type, payload}),
    data => { data transduce },
    R.path(['data'])
  )(body);
};

[phpsmarter]

这用 composeK不就可以了吗?

其实 Redux-saga, 看着复杂,自动化程度更高. 一个异步操作流程用 async 函数包装, 顺序执行的步骤用 await 方法. 整个流程打包成一个函数. async/await 会用的话,问题也不是太大. 不过我看 redux-saga的文档,看了好久,开始都不知道在干什么.

但是现在, 有了 apollo-client 以后, 异步操作完全不是什么问题了.

[adispring]

redux-saga 没有用过

[Qquanwei]

哇，你们也用ApolloClient吗，我一直很喜欢apolloclient的集成度，内置了store + normalizr + 依赖管理，写起来很爽。

[phpsmarter]

composek 还是你教我的

[phpsmarter]

瞎整的,自学中 .