React-redux小结-逆战1913

Redux

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。 (如果你需要一个 WordPress 框架,请查看 Redux Framework。)

可以让你构建一致化的应用,运行于不同的环境(客户端、服务器、原生应用),并且易于测试。不仅于此,它还提供 超爽的开发体验,比如有一个时间旅行调试器可以编辑后实时预览。Redux 除了和 React 一起用外,还支持其它界面库。 它体小精悍(只有2kB,包括依赖)。

网上广为流传的Redux流向图,可以帮助我们更好地理解并使用。
在这里插入图片描述

  • 三个原则
    1) store是唯一的
  1. state 是只读的
    3) 通过纯函数reducer 能够对状态进行修改

安装稳定版:
npm install --save redux
附加包:
npm install --save react-redux
npm install --save-dev redux-devtools
详情可以点击:http://cn.redux.js.org/

React-Redux

React-Redux 将所有组件分成两大类:UI 组件(presentational component)和容器组件(container component)

什么是redux
官方解释:redux 是 js 应用的可预测状态的容器。 可以理解为全局数据状态管理工具(状态管理机),用来做组件通信等。
在这里插入图片描述

UI组件
只负责 UI 的呈现,不带有任何业务逻辑
没有状态(即不使用this.state这个变量)
所有数据都由参数(this.props)提供
不使用任何 Redux 的 API

Provider
它是react-redux 提供的一个 React 组件。用来接收store中的state,并且作为props通过context对象传递给子组件。
用法:
在根组件外层包裹
这样就可以使整个项目的组件成为Provider 的子组件,并通过props获取数据。

  1. state
    前端中的state就是数据,就是一个对象。redux中的state是不能直接修改的,只能通过action来修改,相当于我们在单例中定义setter方法。
  2. action
    redux 将每一个更改动作描述为一个action,要更改state中的内容,你需要发送action。一个action是一个简单的对象,用来描述state发生了什么变更。
  3. reducer
    数据state,指示action都有了那么就是实现了。reducer就是根据action来对state进行操作。通过reducer操作后返回一个新的state,比如这里根据action的type分别对state.num进行加减。
  4. store
    store就是整个项目保存数据的地方,并且只能有一个。创建store就是把所有reducer给它
  5. dispatch
    store.dispatch()是组件发出action的唯一方法。

创建项目、添加依赖
1、创建
在这里插入图片描述
2、添加
在这里插入图片描述
3、添加路由
在这里插入图片描述
异步操作
redux-thunk
a) yarn add redux-thunk
b) applyMiddleware
c)createStore(reducer,applyMiddleware(thunk));
4) actionCreator里面,,
方法要返回 回到函数,参数就是 dispatch


版权声明:本文为RaymondJun原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。