美文网首页
React - Redux实践

React - Redux实践

作者: 守心向暖 | 来源:发表于2017-09-15 15:29 被阅读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
    

    相关文章

      网友评论

          本文标题:React - Redux实践

          本文链接:https://www.haomeiwen.com/subject/emvssxtx.html