初始Redux

homyeeking
212 阅读3分钟

写在前面：

个人觉得redux 的文档有点垃圾，和vuex比，真的写的太乱了，也可能我目前专注度不太够。。。

额，为了找回注意力先简单整理一下vuex，顺便进行对比学习

** vuex**

  • state:在这里我们定义一些用于全局使用的变量
  • getter：就是getter，用的不多
  • mutation：用于修改state的值，只能同步
  • action：用于提交mutation，可以异步
  • module： 业务复杂的话可以创建多个模块来管理，每个模块都是一个vuex

好了 现在来整理一下redux，基本异曲同工，只不过叫的名字不同罢了

Redux

那就按照vuex文档的顺序来说吧，没准整理整理着我就看懂redux这个文档了。。。

1. store

store就是一个主文件，和vuex 的 index.js一个性质，这里我们可以创建state,更改state，

创建state差不多，都是用对象表示，比如：

{
  todos: [{
    text: 'Eat food',
    completed: true
  }, {
    text: 'Exercise',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}

2. action

更改state，这里叫action，也是用一个对象来表示state发生了什么改变， action同时是state数据的唯一来源，通常使用store.dispatch()来将action传入store

{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

action这里是一个指挥官的角色，只是下达命令，而执行命令我们通过一个叫reducer的执行者来完成

3. reducer

reducer 接受 state 和 action 两个参数，然后返回新的state，比如：

function visibilityFilter(state = 'SHOW_ALL', action) {
  if (action.type === 'SET_VISIBILITY_FILTER') {
    return action.filter;
  } else {
    return state;
  }
}

当然根据业务需求，我们可以编写多个reducer函数来管理state

以上基本就是redux思想的核心，小结一下

  • store： 一个盛放redux代码的容器的地方，包括state，action的一些逻辑都在这里
  • action： 来下达改变state的指令，但不指明具体操作
  • reducer： 实现action命令的具体操作

写到这里，猛然想起前一阵面试的时候遇到的问题，就是问了我vuex中用到了哪些设计模式，脑袋里过了一遍也没觉出用了啥设计模式（当然设计模式我目前也是了解不深），现在突然意识到了：

比如这个action，他只是下达命令，然后具体操作由reducer来实现，这不就是经典的工厂模式吗

接下来准备探索Redux、Redux API 和其它魔法。。。

数据流

严格的单向数据流是 Redux 架构的设计核心。

redux的生命周期包括一下四个步骤：

  1. 调用store.dispatch(action)
  2. Redux Store 调用传入的reducer函数
  • 注意 reducer 是纯函数。它仅仅用于计算下一个 state。它应该是完全可预测的：多次传入相同的输入必须产生相同的输出。它不应做有副作用的操作，如 API 调用或路由跳转。这些应该在 dispatch action 前发生。
  1. 根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树
function todos(state = [], action) {
   // 省略处理逻辑...
   return nextState
 }

 function visibleTodoFilter(state = 'SHOW_ALL', action) {
   // 省略处理逻辑...
   return nextState
 }

 let todoApp = combineReducers({
   todos,
   visibleTodoFilter
 })

通过这个api把todos和visibleTodoFilter这两个reducer整合到了一起，触发action后，todoApp会负责调用这两个reducer

	let nextTodos = todos(state.todos, action)
 	let nextVisibleTodoFilter = visibleTodoFilter(state.visibleTodoFilter, action)

然后会把两个结果集合并成一个 state 树：

 return {
   todos: nextTodos,
   visibleTodoFilter: nextVisibleTodoFilter
 }

容器组件

这是相对于UI组件的，容器组建是主要和Redux store建立连接的组件，为什么这么做，参考容器组件和展示组件相分离

并且在redux中，也给我们提供了一个API，connect,来创建容器组件，下面通过一个加减器的小demo来进一步熟悉redux的各个部分。

avatar
文章
阅读
粉丝