Redux
Redux 是 JavaScript 状态容器,提供可预测化的状态管理。 (如果你需要一个 WordPress 框架,请查看 Redux Framework。)
可以让你构建一致化的应用,运行于不同的环境(客户端、服务器、原生应用),并且易于测试。不仅于此,它还提供 超爽的开发体验,比如有一个时间旅行调试器可以编辑后实时预览。Redux 除了和 React 一起用外,还支持其它界面库。 它体小精悍(只有2kB,包括依赖)。
网上广为流传的Redux流向图,可以帮助我们更好地理解并使用。
- 三个原则
1) store是唯一的
- 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获取数据。
- state
前端中的state就是数据,就是一个对象。redux中的state是不能直接修改的,只能通过action来修改,相当于我们在单例中定义setter方法。 - action
redux 将每一个更改动作描述为一个action,要更改state中的内容,你需要发送action。一个action是一个简单的对象,用来描述state发生了什么变更。 - reducer
数据state,指示action都有了那么就是实现了。reducer就是根据action来对state进行操作。通过reducer操作后返回一个新的state,比如这里根据action的type分别对state.num进行加减。 - store
store就是整个项目保存数据的地方,并且只能有一个。创建store就是把所有reducer给它 - dispatch
store.dispatch()是组件发出action的唯一方法。
创建项目、添加依赖
1、创建
2、添加
3、添加路由
异步操作
redux-thunk
a) yarn add redux-thunk
b) applyMiddleware
c)createStore(reducer,applyMiddleware(thunk));
4) actionCreator里面,,
方法要返回 回到函数,参数就是 dispatch