共计 3022 个字符，预计需要花费 8 分钟才能阅读完成。
简介
1) redux 是一个独立专门用于做状态管理的 JS 库 (不是 react 插件库)2) 它可以用在 react, angular, vue 等项目中, 但演变至今基本与 react 配合使用 3) 作用: 集中式管理 react 应用中多个组件共享的状态
Tip:redux 如果不是比较复杂的组件间通信的情况下, 建议还是不使用, 因为会造成代码量的上升和复杂
关键模块
Store
保存状态的主要部分, 共享的状态数据保存在该对象中
Action Creators
工厂函数, 主要用来生成 action 对象, 传输更新的状态数据.
Reducers
接收 action 对象, 对之前的状态和 action 中的新状态进行操作, 并且返回新的结果存在 store 中.
关键函数
store.createStore()
创建 store 对象, 参数传入 reducers 进行绑定.
store.dispatch()
分发 action 对象, 传入 reducers, 进行状态的更新.
store.subscribe()
监听事件, 当有状态改变时, 会自动调用监听的方法 (一般用来重新渲染方法)
使用示例
1. 下载安装
// 此处我使用的是 yarn, 后面两个后面介绍
yarn add redux react-redux redux-thunk
2. 创建文件目录
3. 各部分内容
store.js
import {createStore,applyMiddleware} from ‘redux’
import reducer from ‘./reducer’ // 导入 reducer 进行绑定
import thunk from ‘redux-thunk’ // 这是一个异步解析实现
export default createStore(reducer,applyMiddleware(thunk)); // 导出 store 对象
action-creator.js
import {INCREASE, DECREASE} from ‘./action-type’ // 全局命名声明文件
// 不同的操作, 返回 action 对象,type 为标识,data 为传输的数据
export const incresement = (data) => ({type:INCREASE,data:data})
export const decresement = (data) =>({type:DECREASE,data:data})
// 模拟异步操作, 返回的是主动进行分发操作的一个函数
export const incresementAsync = (data) => {
return (dispatch) => {
setTimeout(()=>{
dispatch(incresement(data))
},1000)
}
}
reducer.js
import {INCREASE,DECREASE} from ‘./action-type’
// 当有 dispatch 被调用时, 会自动来遍历该模块中的所有函数, 并进行匹配.
//previousState 为之前的状态,action 中包含着新的数据
export default function number(previousState = 0,action) {
switch(action.type){
case INCREASE:
return previousState + action.data;
case DECREASE:
return previousState – action.data;
default:
return previousState;
}
}
action-type.js
// 声明定义了一些命名
export const INCREASE = ‘INCREASE’;
export const DECREASE = ‘DECREASE’;
App.js
import React, {Component} from ‘react’
import {connect} from ‘react-redux’
import {incresement, decresement,incresementAsync} from ‘./redux/action-creator’
class App extends Component {
// 进行更新操作
increase = () => {
this.props.incresement(1)
}
decrease = () => {
this.props.decresement(1)
}
increaseAsync = () => {
this.props.incresementAsync(1)
}
render() {
return (
<div>
// 获取状态值
<h3>click {this.props.number} times</h3>
<button onClick={this.increase}>+++</button>
<button onClick={this.decrease}>—</button>
<button onClick={this.increaseAsync}> 异步加 </button>
</div>
)
}
}
// 关键在这里, 这是简写的方式.
// 得益于 react-redux, 将创建 action 对象和 dispatch 的操作都进行了封装简化, 并且封装了获取状态值.
// 不管是进行获取还是更新操作, 都封装进了 props 属性中.
export default connect(
(state) => ({number: state}),
{incresement, decresement,incresementAsync}
)(App)
index.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import {Provider} from ‘react-redux’
import store from ‘./redux/store’
import App from ‘./App’;
// 用 Provider 包装, 就省略了用 subscribe() 监听的回调.
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById(‘root’));
react-redux
专门用来简化 redux 在 react 中使用的一个库. 它将原生 redux 的.getState(), 创建 action 对象,dispatch 等方法进行了封装. 提供如上代码的简写方式.
redux-thunk
用来帮助解析异步操作. 只需要在创建 store 对象的时候用中间件包装的方式作为第二个参数传入即可.
扩展调试工具
redux-devtools-extension.
在谷歌商店中装好这个插件, 然后在创建 store 对象的时候
import {createStore, applyMiddleware} from ‘redux’;
import {composeWithDevTools} from ‘redux-devtools-extension’;
const store = createStore(reducer, composeWithDevTools(
applyMiddleware(…middleware),
// other store enhancers if any
));
总结
redux 在复杂项目中比较适合使用. 它保存着一些多处需要共享的状态数据, 在整个项目中比较方便进行状态数据的更新以及获取.
避免了一些层级比较多或者跨越了比较多级的同级兄弟组件需要互相通信的复杂过程.
