React - Redux实践
2017-09-15 本文已影响0人
守心向暖
- Redux 是什么?
Redux是javascript的状态容器,能提供可预测化的状态管理。提出以下两点:
- web应用是一个状态机,视图与状态是一一对应的。
- 所有的状态,保存在一个对象里面。
Redux的状态容器Store存储着所有的状态数据,每个状态都与视图一一对应。一个State对应一个View,State存储在Store中。
View: 操作入口,向Action发出State即将变化的通知。
ActionCreator:接收View发出的通知,生成对应的Action,并将Action分发[dispatch(action)]给Store。
Store:接收到Action以后将[(prevState, action)]给Reducer,通过Reducer计算后将新的状态通知View更新。
Reducer:通过从Store获取的先前State计算获得新的State,回馈给Store。
整个流程中,数据的流动是单向的,保证了流程的清晰。
- 为什么要用Redux?
由于前端大量无规律的交互和异步操作,使得状态维护不便被掌握,导致对状态失去控制。Redux试图让每个State的变化都是可预测的,统一管理应用中的动作与状态。
{ Provider, createProvider, connectAdvanced, connect } in react-redux
{ MemoryRouter, Prompt, Redirect, Route, Router, StaticRouter, Switch, matchPath, withRouter } in react-router
{ BrowserRouter, HashRouter, Link, MemoryRouter, NavLink, Prompt, Redirect, Route, Router, StaticRouter, Switch, matchPath, withRouter } in react-router-dom
{ ConnectedRouter, routerMiddleware } in react-router-redux
{ createStore, combineReducers, bindActionCreators, applyMiddleware, compose } in redux
{ historyAPI, push, replace, setState, go, goBack, goForward } in redux-router
{ routerStateReducer, ReduxRouter, reduxReactRouter, isActive, historyAPI, pushState, replaceState, setState, go, goBack, goForward } in redux-react-router