-
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组件用于重定向到某个路径下；
<Provider store={store}>
<BrowserRouter>
<Switch>
<Route path="/" exact component={Dashboard}></Route>
<Route path="/login" component={Auto}></Route>
<Route path="/dashboard" component={Dashboard}></Route>
<!-- <Redirect to="/dashboard"></Redirect> -->
<!-- <Link to="/dashboard"></Link> -->
</Switch>
</BrowserRouter>
</Provider>
