美文网首页
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

相关文章

  • Flutter redux 使用与理解

    Flutter 状态管理redux 方案理解与实践 redux 数据管理方式来自 react ,React 的数据...

  • React+Redux工程目录结构,最佳实践

    参考 Redux进阶系列1: React+Redux项目结构最佳实践 《深入浅出React和Redux》一书的第四...

  • react-redux实践

    react-redux实践 了解 1、什么是redux 官方解释:redux 是 js 应用的可预测状态的容器。 ...

  • React-Redux分析

    React-Redux分析 Redux,作为大型React应用状态管理最常用的工具,其概念理论和实践都是很值得我们...

  • Redux for ReactNative (二)

    安装 React Redux Redux不包含React库,需要单独安装React 绑定库 react-redux...

  • dvajs-core在vue的实践

    dvajs dvajs来源于支付宝前端的实践,基于redux、redux-saga和react-router 的轻...

  • redux

    单独使用redux redux是核心库 与react配合使用redux 安装react-redux react-r...

  • React - Redux实践

    Redux 是什么? Redux的状态容器Store存储着所有的状态数据,每个状态都与视图一一对应。一个State...

  • 两张图看懂 React Redux 架构和数据流

    React 技术栈 React - 视图层Redux - 状态、数据层React-Redux - 连接Redux-...

  • redux note(一)

    redux 搭配 React使用 Redux和React之间没有关系,Redux支持React, Angular,...

网友评论

      本文标题:React - Redux实践

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