Redux & React-redux

发表于 | 分类于

Redux

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。它由 Flux 演变而来，但受 Elm 的启发，避开了 Flux 的复杂性。

应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。 惟一改变 state 的办法是触发 action，一个描述发生什么的对象。 为了描述 action 如何改变 state 树，你需要编写 reducers。reducer 只是一个接收 state 和 action，并返回新的 state 的函数。 对于大的应用来说，不大可能仅仅只写一个这样的函数，所以我们编写很多小函数来分别管理 state 的一部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function visibilityFilter(state = 'SHOW_ALL', action) {
  if (action.type === 'SET_VISIBILITY_FILTER') {
    return action.filter;
  } else {
    return state;
  }
}

function todos(state = [], action) {
  switch (action.type) {
  case 'ADD_TODO':
    return state.concat([{ text: action.text, completed: false }]);
  case 'TOGGLE_TODO':
    return state.map((todo, index) =>
      action.index === index ?
        { text: todo.text, completed: !todo.completed } :
        todo
   )
  default:
    return state;
  }
}

再开发一个 reducer 调用这两个 reducer，进而来管理整个应用的 state：

1
2
3
4
5
6
function todoApp(state = {}, action) {
  return {
    todos: todos(state.todos, action),
    visibilityFilter: visibilityFilter(state.visibilityFilter, action)
  };
}

在vue中，可以使用vuex进行数据管理，在react中，可以使用redux进行数据管理。redux主要由Store、Reducer和Action组成：

  • Store：状态载体，访问状态、提交状态、监听状态变更
  • Reducer：状态更新具体执行者，纯函数（接收 state 和 action，并返回新的 state）
  • Action：存放数据的对象，即消息的载体，只能被别人操作，自己不能进行任何操作

官方示例

React-redux

Redux 的 React 绑定库是基于容器组件（Smart/Container Components）和展示组件（Dumb/Presentational Components）相分离的开发思想。

所有容器组件都可以访问 Redux store，所以可以手动监听它。一种方式是把它以 props 的形式传入到所有容器组件中。但这太麻烦了，因为必须要用 store 把展示组件包裹一层，仅仅是因为恰好在组件树中渲染了一个容器组件。

建议的方式是使用指定的 React Redux 组件 来让所有容器组件都可以访问 store，而不必显式地传递它。只需要在渲染根组件时使用即可。还有一个就是

1
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

连接 React 组件与 Redux store。

连接操作不会改变原来的组件类。

反而返回一个新的已与 Redux store 连接的组件类。

这种随处都可以使用、修改Redux中的数据的方式确实很方便，但Redux推荐的最佳实践还是在尽可能少的地方使用connect，把逻辑，数据相关的都放到容器组件中去处理，其他的组件都由容器组件所生成的props一层层传递下去然后渲染。

参考文档