关于redux 之前是 就学习过的,今天看了一下阮一峰大神的博客 ,想再整理总结一下;
先写流程
1, view 触发方法方法 触发了dispath;
2,store.dispatch( action);
3,reducer 通过action计算出新的state;
4,connect(mapStateToProps,mapDispatchToProps)(app);通过这个connect方法把state变成props传入组件,同时mapStateToProps监听到了store的变化,这块的话使得state如果发生变化,那么mapStateToProps来使UI刷新;
其中action一般是
{
type: 'ADD_TODO',
payload: 'Learn Redux'
};
这种规范;上面代码中,Action 的名称是ADD_TODO
,它携带的信息是字符串Learn Redux
。
reducer是纯函数 ,用来定义规则
dispatch用来派发规则;
store是整体的数据集合;
基本上redux和react-redux 是两个不同:1,<provider></provider>; 2,connect()方法;
下面来介绍中间件的简单的用法
首先要引入 应用中间件的方法
import { applyMiddleware, createStore } from 'redux';
然后这边在creatStroe里applyMiddleware上这些中间件;
const store = createStore(
reducer,
applyMiddleware(logger)
);
注意:这些中间件的排序
const store = createStore( reducer, applyMiddleware(thunk, promise, logger) );
上面代码中,applyMiddleware
方法的三个参数,就是三个中间件。有的中间件有次序要求,使用前要查一下文档。比如,logger
就一定要放在最后,否则输出结果会不正确。
学习 阮一峰的 redux入门教程