Redux是什么？
-
redux是一个专门用于做状态管理的JS库（不是react插件库），学过vue框架的应该知道和vuex差不多。 - 它可以用在
react，angular，vue等项目中，但基本与react配合使用。 - 作用： 集中式管理
react应用中多个组件共享的功能。
三大原则
image.png
单一数据源
- 整个应用的state被存储在一个对象树中, 并且这个对象树只存在一个唯一的store
State是只读的
- 唯一改变
state的方法简书触发action, 让action去修改state, action是一个用于描述已发生事件的普通对象
这样就确保了视图和网络请求都不能直接的修改state, 让所以的修改都被集中化处理
使用纯函数来执行修改
- 为了描述 action 如何改变 state tree ，你需要编写 reducers
Reducer 只是一些纯函数，它接收先前的 state 和 action，并返回新的 state。刚开始你可以只有一个 reducer，随着应用变大，你可以把它拆成多个小的 reducers，分别独立地操作 state tree 的不同部分，因为 reducer 只是函数，你可以控制它们被调用的顺序，传入附加数据，甚至编写可复用的 reducer 来处理一些通用任务，如分页器。
Redux成员及数据流
-
actions- actions其实是描述操作的对象，我们调用dispatch时需要传入此对象。
-
store- store是整个应用的数据存储仓库，把我们全局管理的状态数据存储起来。
-
reducers- reducers接收actions并更新store
Redux数据流的走向
image.png
Redux中最核心的API -- createStore
Store与Reducers建立联系
- store可以相当于是一个工厂
- reducers可以相当于是工厂里面干活的机器
import { createStore } from 'redux';
const store = createStore(reducers);
通过 createStore方法创建的是一个对象, 他本身包含4个方法.
-
getState(): 获取store中当前的状态 -
dispatch(): 分发一个action, 并返回这个action, 这是唯一能改变store中数据的方式 -
subscribe(listener): 注册一个监听者, 它在store发生变化时被调用 -
replaceReducer(nextReducer): 更新当前store里的reducer, 一般只会在开发模式中调用该方法
// 导入createStore
import { createStore } from 'redux';
const firstReducer = (state = 0, action) => {
switch (action.type) {
case 'add':
return state + 1;
case 'reducer':
return state - 1;
default:
return state;
}
}
// 建立联系
const store = createStore(firstReducer);
export default store;
使用dispatch & getState
import React, { Component } from 'react';
import store from './store'
class FirstReducer extends Component {
add = () => {
store.dispatch({ type: 'add' })
}
reducer = () => {
store.dispatch({ type: 'reducer' })
}
render() {
return (
<div>
总数:{store.getState()}
<button onClick={this.add}>加1</button>
<button onClick={this.reducer}>减1</button>
</div>
);
}
}
export default FirstReducer;
react-redux
- 由于redux的写法太繁琐, 还每次都需要重新调用render, 不太符合我们了解react编程
- react-redux问世, 安装react-redux:
npm install react-redux --save - react-redux提供两个api供我们使用
-
Provider顶级组件, 功能为我们提供数据 -
connect高阶组件, 功能为提供数据和方法
-
通过props的方法来传输数据
import React, { Component } from 'react'
import { connect } from 'react-redux';
const mapStateToProps = (state) => {
return {
count: state
}
}
const mapDispatchToProps = (dispatch) => {
return {
add: () => {
dispatch({type: 'add'})
},
reducer: () => {
dispatch({type: 'reducer'})
}
}
}
class App extends Component {
render() {
return (
<div>
App
{this.props.count}
<button onClick={() => this.props.add()}>加1</button>
<button onClick={() => this.props.reducer()}>减1</button>
</div>
)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(App);
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import store from './redux/store';
import { Provider } from 'react-redux';
ReactDOM.render(
<Provider store={store}>
<App/>
</Provider> , document.querySelector('#root'));
redux中间件
- 由于redux reducer默认只⽀持同步，实现异步任务或者延时任务
时，我们就要借助中间件的⽀持了 -
没使用中间件时的redux数据流
image.png
- 使⽤了中间件middleware之后的redux数据流
image.png
-
redux-thunk支持我们reducer在异步操作结束后自动执行
npm i redux-thunk --save
-
redux-logger打印日志记录协助本地调试
npm i redux-logger --save
import { createStore,applyMiddleware } from 'redux'
import logger from 'redux-logger'
import thunk from 'redux-thunk'
const fitstReducer = (state=0,action ) => {
console.log(action)
switch(action.type){
//当传⼊action的type为add的时候给state+1
case 'add' :
return state+1;
//当传⼊action的type为reduce的时候给state-1
case 'reduce' :
return state-1;
//当传⼊的都不是以上的类型是返回旧的state
default:
return state;
}
}
//创建数据仓库，把我们编写的reducer作为参数传⼊createStore
//有⼀个注意点就是logger最好放在最后，⽇志最后输出才不会出
//bug，因为中间件时按顺序执⾏
const store=createStore(fitstReducer,applyMiddleware(thunk,logger))
export default store
网友评论