理解Redux
Reducer
(纯函数)拿到下一个State和之前的State来计算一个新的State。 初始化更改State中的值，并返回State ，接受两个参数 ，第一个为旧的state，第二个为action 根据type 更改state并返回
function visibilityFilter(state = SHOW_ALL, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return action.filter
default:
return state
}
}12345678
可以使用combineReducers合并
import { combineReducers } from 'redux'
const todoApp = combineReducers({
visibilityFilter,
todos
})
export default todoApp12345678
Store
Store 就是把它们联系到一起的对象
let store = createStore(todoApp)
// 打印初始状态
console.log(store.getState())
// 每次 state 更新时，打印日志
// 注意 subscribe() 返回一个函数用来注销监听器
const unsubscribe = store.subscribe(() =>
console.log(store.getState())
)
// 发起一系列 action
store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED))
// 停止监听 state 更新
unsubscribe();123456789101112131415
Action
描述State的改变，必须是一个包含type键的对象
export interface Action {
type: string;
payload?: any; // 这个值可有可无
}
12345
可以封装一个方法来生成action
export function setVisibilityFilter(filter) {
return { type: SET_VISIBILITY_FILTER, filter }
}123
转载请保留原文链接： https://zodream.cn/blog/id/49.html