前言
上一记已经使用react-router配置，搭好了一个简单的中后台框架。现在开始引入redux和react-redux来方便管理应用中越来越复杂的state(状态)。
1.什么是redux？它为了解决什么问题？
嗯，这个很重要，最好的学习方式就是看它的中文文档，有详细的介绍。学习并理解它核心的概念，知道了它原理用起来心里就不慌。传送门
2.笔记
简单介绍Redux 三大原则
- 单一数据源 整个应该的state被存储在一棵object tree中，并且这个object tree 只存在一个store中。
- 唯一改变state的方法就是action，action是一个普通对象，用来表示即将改变state的意图，并且必须拥有一个type域。
- 使用纯函数来执行修改。为了描述action 如何改变state tree，需要编写reducers。
具体的实现就是开发一个函数来做主reducer，调用多个子reducer来分别处理state中的一部分数据，然后将这些数据合成一个大的单一对象。
3.调试工具
Redux DevTools，在谷歌商店中搜索该插件，并添加到谷歌浏览器中。
在redux创建store时 添加如下配置
//基本的配置
const store = createStore(reducer, /* preloadedState, */
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
//使用中间件的配置
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
<Provider store={store}>
<App />
</Provider>,
2.链接组件
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创建函数
//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。
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
