React+TypeScript+Ant(笔记二)

前言

上一记已经使用react-router配置,搭好了一个简单的中后台框架。现在开始引入redux和react-redux来方便管理应用中越来越复杂的state(状态)。

1.什么是redux?它为了解决什么问题?

嗯,这个很重要,最好的学习方式就是看它的中文文档,有详细的介绍。学习并理解它核心的概念,知道了它原理用起来心里就不慌。传送门

2.笔记

简单介绍Redux 三大原则

  1. 单一数据源 整个应该的state被存储在一棵object tree中,并且这个object tree 只存在一个store中。
  2. 唯一改变state的方法就是action,action是一个普通对象,用来表示即将改变state的意图,并且必须拥有一个type域。
  3. 使用纯函数来执行修改。为了描述action 如何改变state tree,需要编写reducers。

具体的实现就是开发一个函数来做主reducer,调用多个子reducer来分别处理state中的一部分数据,然后将这些数据合成一个大的单一对象。

3.调试工具

Redux DevTools,在谷歌商店中搜索该插件,并添加到谷歌浏览器中。
在redux创建store时 添加如下配置

1
2
3
4
//基本的配置
const store = createStore(reducer, /* preloadedState, */
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
1
2
3
4
5
6
7
//使用中间件的配置
import { createStore, applyMiddleware, compose } from 'redux';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
compose(applyMiddleware(...middleware))
);

4.开始编码

如果一开始并没有使用过react-redux,那么最好我们先是将官方的demo中所涉及的东西都掌握了。因为Redux可以支持React、Angualr、Vue等很多库,但是react-redux是专门为绑定react的,两者用法稍微有点不同。
1.在根组件提供store

1
2
3
<Provider store={store}>
<App />
</Provider>,

2.链接组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const mapStateToProps = (state, ownProps) => ({
// computed data from state and optionally ownProps
})
const mapDispatchToProps = {
// ... normally is an object full of action creators
}
const Component =function(){
return {
//todo
}
}
connect(
mapStateToProps,
mapDispatchToProps
)(Component)

mapStateToProps在每次store中的state更改时调用。它接收整个存储状态,并应返回此组件所需的数据对象。
mapDispatchToProps:可以是函数,也可以是对象。

  • 如果它是一个函数,它将在组件创建时调用一次。它将dispatch作为参数接收,并且应该返回一个充满dispatch用于调度操作的函数的对象
  • 如果它是一个包含action创建函数的对象,则每个action创建函数将变成一个prop函数,在被调用时自动调度其动作。

3.action创建函数

1
2
3
4
5
6
7
8
9
10
11
//action.ts 
//action创建函数只是简单的返回一个 action
export const addTodo = (text:string) => ({
type: 'ADD_TODO',
id: nextTodoId++,
text
})
export const setVisibilityFilter = (filter:any) => ({
type: 'SET_VISIBILITY_FILTER',
filter
})

4.Reducer
Reducers 指定了应用状态的变化如何响应 actions 并发送到store。

1
2
3
4
5
6
7
8
9
10
import { VisibilityFilters } from '../action/action'
const visibilityFilter = (state = VisibilityFilters.SHOW_ALL, action:any) => {
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return action.filter
default:
return state
}
}
export default visibilityFilter