redux基础

• Redux
• react-redux
• React-router

Redux

1、基本用法：

• Redux中存在几个概念：state, action, dispatch

  state: 依旧是组件的内部的状态
  action: 组件动作，相应的改变组件内部的状态值
  dispatch: 发出相应的动作

  Redux中提供createStore方法用于生成一个store对象，这个函数接受一个初始值state值和一个reducer函数。当用户发出相应的action时，利用传入的reducer函数计算出一个新的state值，并返回。

• 使用Redux，我们只获取一次数据并将其存储在一个中心位置，称为 store。然后，任何组件都可以随时使用这些数据。这就像附近有一家超市，我们的厨师可以在那里买到所有的食材。这家超市派卡车从农场大批运回蔬菜和肉类。这比让个别厨师亲自去农场效率高得多。

• store 还是唯一的数据源。组件通常从 store 中获取数据，而不是其他地方。这使得 UI 保持高度统一。

• store对象中包括getState方法(获取目前的state)，subscribe方法(指定监听函数，当state变化时调用)，dispatch方法(分发action)。

• 在使用过程中，需要将store作为参数传递给子组件。

// reducer
function counter(state = 0, action) {
  switch (action.type) {
    case 'ADD':
      return state + 1;
    case 'SUB':
      return state - 1;
    default:
      return 10;
  }
}

// 创建Store
let store = createStore(counter);
console.log(store.getState()); // 10

// 监听器
function listener() {
  console.log(store.getState()) // 先输出11，在输出10
}

// 订阅事件监听
store.subscribe(listener);

// 分发事件
store.dispatch({ type: 'ADD' });

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

• 多个reducer

  当存在多个reducer，分别管理不同方面的state，需要将其合并成一个reducer，redux中提供了combineReducers函数，完成该项功能。

combineReducers({ reducer1,reducer2 }) //返回合并后的reducer

2、redux的不足：

• 陡峭的学习曲线

  Redux　的学习曲线比较陡峭。 理解，记忆并习惯其模式需要时间。 如果你完全不会 Redux 和 React ，不推荐你两者同时学习。

• “样板” 代码

  在许多情况下，使用Redux意味着编写更多代码。通常需要接触多个文件才能使一个简单的功能正常工作。人们一直在抱怨他们必须用 Redux 编写的样板代码。

  我知道，这听起来很矛盾。 我不是说 Redux 能够用最少的代码实现功能吗？ 这有点像使用洗碗机。 首先，你得花时间仔细地排列盘子。 在此之前，你将看到洗碗机的好处：节省实际清洁餐具的时间，消毒餐具等。你必须决定准备时间是否值得。

• 性能损耗

  由于其强制执行的限制，Redux 也可能对性能产生影响。 每当数据发生变化时，它会增加一点开销。 在大多数情况下，这不是什么大问题，而且放缓并不明显。 仍然，当存储中存在大量数据并且当数据频繁改变时（例如，当用户在移动设备上快速键入时），UI 可能因此变得缓慢。

3、Redux 不只是为 React 而生

• 一个常见的误解是 Redux 仅用于 React。 听起来Redux在没有React的情况下无法做任何事情。 事实上，正如我们之前所讨论的，Redux在几个重要方面补充了React。 React 是最最常见的 Redux 用例。
• 然而，事实上，Redux可以使用任何前端框架，如Angular、Ember.js 甚至jQuery 或者 普通的JavaScript。试着谷歌一下，你会发现这个，这个，这个甚至这个。Redux 的一般思想适用于任何地方
• 只要你明智地使用 Redux，你可以在很多情况下得到它的好处，而不仅仅是在React应用中。

react-redux

• react-redux是为了方便开发，提供了一个Provider组件，以及connect方法。Provider组件作为做上层组件，需要将store作为参数注入组件中，此后在子组件中都可以访问到store这个对象；connect方法接受两个参数：mapStateToProps，actionCreators，并返回处理后的组件，其中mapStateToProps可以将对应的state作为prop注入对应的子组件，actionCreator可以将对应的actioncreator作为prop注入对应的子组件。

// 定义Connect,将对应的数据注入
const mapStateToProps = (state) => {
  return { num: state }// 必须返回一个对象
};
const actionCreator = { addAction, subAction, addActionAsync }

App = connect(mapStateToProps, actionCreator)(App)

• 装饰器写法：

@connect(
  (state) => ({ num: state.counter }),
  { addAction, subAction, addActionAsync }
)

• 使用上述写法，需要安装babel插件babel-plugin-transform-decorators-legacy，并且在babelrc中添加相应的配置

 npm install --save-dev babel-plugin-transform-decorators-legacy

 "plugins": [
   "transform-decorators-legacy"
]

React-router

• react-router提供了web和Native两个版本，当在浏览器中使用时，需要安装react-router-dom

npm install --save react-router-dom

• react-router-dom中提供了BrowserRouter, Link, Route, Switch，Redirect。

  其中：
  1、 BrowserRouter包裹所有需要路由控制的内容，在使用redux时，需要放置在Provider组件中；
  2、 Link组件用于链接某个路径下，用户点击跳转；

  3、 Route组件用于路由到这个组件；
  4、Switch组件用于在内部Route组件中选一个；

  5、 Redirect组件用于重定向到某个路径下；

    
      
        
        
        
        
        
      
    
  ,